25

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.

Stephane Mathis
  • 6,542
  • 6
  • 43
  • 69
Yogi
  • 1,561
  • 5
  • 26
  • 45
  • 3
    One executes immediately and then gives the result; the other creates a function that -- when the function is invoked will perform that behavior -- and returns the function (not the execution of its body). – Michael Aaron Safyan Jan 20 '16 at 06:23

5 Answers5

31
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!')};
};
rogerdeuce
  • 1,471
  • 6
  • 31
  • 48
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • document.getElementById("myButton").onclick = alert('Hi!'), if this expects a function reference why does it not throw error instead it just alerts whenever the page is loaded.. – Yogi Jan 20 '16 at 06:35
  • 3
    @3yK It will not throw an error at page load, only at button click. Since when the button click happens only then a function call onclick() will be made which will get translated to `(alert("hi'))()`. At page load it will simply execute alert(Hi). – gurvinder372 Jan 20 '16 at 06:36
  • @3yK check the updated answer as well. – gurvinder372 Jan 20 '16 at 06:40
  • @gurvinder372 just to be clear, if you put your ` – Apolo Jan 20 '16 at 10:05
  • 2
    @Apolo I would still keep it in `window.onload` for two reasons 1) so that my code is not too much dependent on where it is on a page 2) you don't have to worry about your collegue copying this code (which was working in this location) to somewhere else and then complain to you that your code hasn't worked. Pretty much all the reasons why we follow best-practices :) – gurvinder372 Jan 20 '16 at 11:15
  • @gurvinder372 Two good points, thanks – Apolo Jan 20 '16 at 13:10
  • 1
    @3yK specifically, it will run `alert("hi")` to see what that returns (it returns `undefined`), and stores _that_ in the onclick handler. When you click it, it then calls `undefined()` and because that's not a valid function it causes an error. – Skyler Jan 20 '16 at 19:47
10

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.

Amir Popovich
  • 29,350
  • 9
  • 53
  • 99
7

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.

Charlie
  • 22,886
  • 11
  • 59
  • 90
6
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
madhairsilence
  • 3,787
  • 2
  • 35
  • 76
5

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.

Community
  • 1
  • 1
ekuusela
  • 5,034
  • 1
  • 25
  • 43