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

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') 

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

Answer 3

See this post for explanation for why the inline version works.

In short, the browser doesn't just assign alert('Hi!') to onclick but instead wraps it in a function.

Answer 4

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 5

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.