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.

Answer 1

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 ?