difference between alert("Hi!") and function(){alert("Hi!")} [duplicate]

Question

When we are doing inline command in the button:

<button id="myButton" onclick="alert('Hi!')"> 

Why does

document.getElementById("myButton").onclick = alert('Hi!') 

not work but give the alert as the page is loaded? I can't understand how it works with function() added to it and without function(). I hope you guys understand my question. I'm missing something here.

Answer 1

document.getElementById("myButton").onclick = alert('Hi!')

is wrong since onclick should be assigned to a function reference, not the function call result itself.

It will execute alert('Hi!') when the page is loaded but that is not the intention here, is it? The intention behind assigning an onclick handler is to ensure that when the button is clicked this alert will be executed.

For that to happen it should be:

document.getElementById("myButton").onclick = function(){alert('Hi!')};

Also, this will not work unless it is wrapped inside the window.onload event:

window.onload = function(){
    document.getElementById("myButton").onclick = function(){alert('Hi!')};
};

Answer 2

alert('Hi!') is a function call that alerts 'Hi' and returns nothing (undefined).

onclick expects to get a function and you are passing the function call's result which is undefined.

Since JavaScript is not a strong typed framework you don't get an error on bad assignments.

So why does the following work:

<button id = "myButton" onclick="alert('Hi!')">

It's because the html parser (in this case, your browser) does some work behind the scenes and wraps the call with a function.

Answer 3

document.getElementById("myButton").onclick expects a function to be called later.

<button id = "myButton "onclick="alert('Hi!')"> expects a block of code to be executed later.

Answer 4

alert('Hi') 

Here alert is an inbuilt function called by browser which opens a alert box.

function callAlert(){
  alert('Hi');
}

Here callAlert is a custom function which calls the inbuilt function alert

In your example, when appending a click event, you have to define the function

document.getElementById("myButton").onclick = alert('Hi!') //alert is 

already executed

document.getElementById("myButton").onclick = function (){ alert('Hi!') }; 
//a function is defined/declared which will be executed when the onclick action is performed