Javascript function not being run from click - what am I doing wrong?

Question

I am currently making some accessibility options which make the font size increase or decrease on a page. Following EndangeredMassa's for calling JS from a link it appears not to work!

My current code (which is dummy code with the right IDs which will be used in my actual site), does not even run a Javascript alert, and since I'm not one for Javascript, if anyone could let me know what I'm doing wrong.

HTML

<p id="html">Nice to meet you!</p>
<a id="incFontS" href="#">Increase Text</a>

JavaScript

var incFont = document.getElementById("incFontS");
incFont.onClick = function () {
    window.alert("it ran!");
}

As you can see from my jsfiddle, the code does not work at all, and I haven't even gotten to the part where I start changin the font sizes (geh!).

Any help is greatly appreciated!

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick — Felix Kling, Sep 04 '14 at 16:52
Also http://www.quirksmode.org/js/introevents.html is a very good read to learn more about event handling in JS. — Felix Kling, Sep 04 '14 at 17:13

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

Case matters in JavaScript. The correct property name is onclick (with a lowercase 'c'). Try this:

var incFont = document.getElementById("incFontS");
incFont.onclick = function () {
    window.alert("it ran!");
}

Demonstration

Also, be sure to read addEventListener vs onclick for a discussion about different techniques for binding event listeners.

edited May 23 '17 at 12:18

Community

1
1

answered Sep 04 '14 at 16:51

p.s.w.g

146,324
30
291
331

score 1 · Answer 2 · answered Sep 04 '14 at 16:53

1

DEMO

var incFont = document.querySelector("#incFontS");
incFont.addEventListener('click', function () {
    window.alert("it ran!");
    return false;
});

answered Sep 04 '14 at 16:53

Gildas.Tambo

22,173
7
50
78

score 1 · Answer 3 · answered Sep 04 '14 at 16:55

1

The function name is onclick not onClick

i.e.

var incFont = document.getElementById("incFontS");
incFont.onclick = function () {
    window.alert("it ran!");
}

works for me.

answered Sep 04 '14 at 16:55

Alex Pakka

9,466
3
45
69

score 0 · Answer 4 · answered Sep 04 '14 at 17:12

Try this way to do increase your font size

HTML CODE

<p id="html">Nice to meet you!</p>
<a id="incFontS" href="#" onclick="myFunction()">Increase Text</a>

Java Script Code

<script>
function myFunction() {
    document.getElementById("html").style.fontSize="xx-large";
}
</script>

Javascript function not being run from click - what am I doing wrong?

4 Answers4

DEMO