onClick / onclick does not seem to be working as expected in HTML5 / JavaScript

Question

I'm trying to do something very simple - call a function when a button is clicked. I've looked at several examples online, such as W3Schools and (I believe) I am using onclick / onClick correctly it does not seem to be functioning. I have tried several different methods - I'm really not sure what I'm doing wrong.

Method 1

HTML

<button id="buttonAdd" onclick="add()">Add</button>

JavaScript

function add() {
    console.log("Test"); 
}

Result:

Test

When the button is clicked this flashes up in the console.log faster than I can easily see and then disappears.

Method 2

HTML

<button id="add">Add</button>

JavaScript

window.onload = function() {
    document.getElementById("add").onclick = add; 
} 

function add() {
    console.log("Test"); 
}

Result

Test

When the button is clicked this flashes up in the console.log faster than I can easily see and then disappears.

Method 3

HTML

<button id="add">Add</button>

JavaScript

window.onload = function() {
    document.getElementById("add").onclick = add(); 
} 

function add() {
    console.log("Test"); 
}

Result

Test

This appears in the console log and remains there, without the button having been clicked.

Issue

I'm generally feeling confused. From what I can tell I am doing what is suggested by examples (the different methods I have tried reflect differences in examples).

Thanks.

Edit

So it seems the issue is the console.log flashing up almost faster than I can see... Does anyone have any idea why this might be? It seems like the page is refreshing itself, but I have no idea why this would be...

Answer

The button was in a form which caused the page to refresh when it was clicked.

the Method 3 is wrong. Trying to asign the onclick with add() will actually execut the add function and assign onclick with whatever add returns, so, nothing. — TheBrain
– TheBrain, Commented Apr 11, 2013 at 13:12
is your button in a form ? because if so, then the form is submited and that's why the the page refreshes. can you post a jsfiddle with your test ? — TheBrain
– TheBrain, Commented Apr 11, 2013 at 13:21
Oh geez, that's why... Thank you! Could you add this as an answer so I can select it, please. Thanks! — Eilidh
– Eilidh, Commented Apr 11, 2013 at 13:21

TheBrain · Accepted Answer · 2013-04-11 13:22:33Z

8

the problem is the name of your function. it is the same as the id of the element. do a test an try writing this console.log(add). You will see it logs the DOM node and not the function.

is your button in a form ? because if so, then the form is submited and that's why the the page refreshes. can you post a jsfiddle with your test ?

edited Apr 11, 2013 at 13:22

answered Apr 11, 2013 at 13:09

TheBrain

5,6202 gold badges27 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wim Ombelets Over a year ago

yep, seems with a literal reference to the onclick function OF that DOM element, the engine is no longer confused, whereas in the first example, there is ambiguity in the naming. Good call. Addresses a deeper issue, that of consistent naming practices.

Eilidh Over a year ago

I've altered the name of the function. I still have the issue where 'Test' appears in the console log and disappears almost faster than I can see.

Community · Accepted Answer · 2020-06-20 09:12:55Z

Regarding Method 1:

I would need to see a bit more of your html structure to say for sure, but it sounds like in Method 1, the function isn't being declared properly in a way that is in scope. That might have to do with the names being the same, as theBrain mentioned or it might caused by some other problem.

Edit: From your response to theBrain, it sounds like you are able to get method 1 to work if you use different names. Given that, you can also prevent the page post by changing the onclick to include a return false value. Either of the following will work:

<button id="buttonAdd" onclick="add(); return false;">Add</button>

or

<button id="buttonAdd" onclick="return add();">Add</button>

coupled with the addition of return false; as the last line of your add() function's code.

Regarding Method 2:

In either case, method 2 is a better way of implementing this, so we can sort of ignore the reasons behind method 1 failing (though having distinctly different names for the function vs the button element would certainly be a good practice; personally, I preface all of my button ids with 'btn_').

The likely reason for the super-fast clearing of the console in both methods is that you do not have a type declared for the button. Different browsers do things differently in the absence of a type (see the tip on the W3Schools Button Tag), and it sounds like yours is treating this as a submit button, which means that it posts back to the page when clicked. You should be able to prevent this behavior by specifying type='button' within the attributes of the button element.

Regarding Method 3:

Finally, method 3 is providing the behavior that it is because your assignment statement is also executing a call to the add() function.

C3roe · Accepted Answer · 2013-04-11 13:08:55Z

0

When the button is clicked this flashes up in the console.log faster than I can easily see and then disappears.

This is suspicious – console output is normally not cleared without user interaction.

Could it be that your page just gets reloaded – and therefor the console output “disappears”?

In general, you should not use this kind of “old-school” event handling any more anyway (unless it is for something really small-scale).

Have a look at popuplar JS libraries like jQuery etc. – they simplify event handling (amongst other things) at lot.

answered Apr 11, 2013 at 13:08

C3roe

97.7k15 gold badges100 silver badges172 bronze badges

Comments

Aakash · Accepted Answer · 2019-08-21 08:26:43Z

0

Mine was a little different, though I got help from @TheBrain's answer. Name of my javascript method was submit(), which was actually submitting my form. When I changed name of method to submitForm(), it worked.

I think earlier submit() was internally calling Javascript Form's submit() and not my javascript method.

Corrections invited.

answered Aug 21, 2019 at 8:26

Aakash

2,12915 silver badges24 bronze badges

Collectives™ on Stack Overflow

onClick / onclick does not seem to be working as expected in HTML5 / JavaScript

4 Answers 4

2 Comments

Regarding Method 1:

Regarding Method 2:

Regarding Method 3:

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Regarding Method 1:

Regarding Method 2:

Regarding Method 3:

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related