html - onClickonclick does not seem to be working as expected in HTML5JavaScript - Stack Overflow

admin管理员组

文章数量:1350369

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.

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.

• javascript
• html

Share Improve this question Follow edited Apr 11, 2013 at 13:23 Eilidh asked Apr 11, 2013 at 13:04 EilidhEilidh 1,37455 gold badges2323 silver badges4444 bronze badges 5

• actually the Method 1 works fine. Both in Chrome and IE. – Sho Commented Apr 11, 2013 at 13:09
• 1 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 Commented Apr 11, 2013 at 13:12
• true as that may be @Sho, it's bad practice to usurp names. – Wim Ombelets Commented Apr 11, 2013 at 13:13
• 2 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 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 Commented Apr 11, 2013 at 13:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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 ?

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.

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.

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.

本文标签： htmlonClickonclick does not seem to be working as expected in HTML5JavaScriptStack Overflow