Timing of button.onclick execution

Question

I'm just learning JS and I'm using the Head First books. In one of the lessons, the following code is given to set up an event handler for a button:

window.onload = init

function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}
function handleButtonClick() {
    alert("Button has been pressed");   
}

When I test the code in the browser, the alert pops up when I click the button, as expected. So I rearranged some things and tried this, just to see what would happen:

window.onload = init

function init() {
    var button = document.getElementById("addButton");
    button.onclick = alert("Button has been pressed");
}

Now the alert shows up as soon as the page loads, but I can't figure out why. Why doesn't the alert wait until the button is clicked? I'm a complete newb at JS and programming in general. Thanks!

score 1 · Accepted Answer · answered Oct 10 '14 at 01:47

1

You need to enclose it in a function, or it will execute immediately:

window.onload = init

function init() {
    var button = document.getElementById("addButton");
    button.onclick = function(){ alert("Button has been pressed") };
}

<button id="addButton">Alert</button>

This occurs because you're trying to assign alert() to the onclick property of a button, which is not possible. JavaScript often fails "nicely," acting oddly rather than throwing errors in an attempt to prevent webpages from breaking entirely. When it sees the alert(), it executes immediately.

If you wrap it in a function, you can assign the function to the onclick property and it will work as expected.

answered Oct 10 '14 at 01:47

AstroCB

12,337
20
57
73

Will properties only accept functions as assignments in general? Is this just an arbitrary rule of JS? – Bretto Oct 10 '14 at 02:03
@Brett It depends on the property, but not always. `onclick` assigns an [event listener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener) to the given element, so you need to pass a function for the value. – AstroCB Oct 10 '14 at 02:05

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

It is expected. Javascript would run alert("Button has been pressed"); you might want to change it to button.onclick = function() {alert("Button has been pressed"); };

Useful reading about this:

Why do you need to invoke an anonymous function on the same line?

http://www.quirksmode.org/js/events_advanced.html

edited May 23 '17 at 10:25

Community

1
1

answered Oct 10 '14 at 01:47

Hatjhie

1,366
2
13
27

score 0 · Answer 3 · answered Oct 10 '14 at 01:46

0

Yep, onclick takes a function - simply passing alert() will execute immediately. You need to do:

button.onclick = function() {
    alert("Button has been pressed");
}

answered Oct 10 '14 at 01:46

tymeJV

103,943
14
161
157

Timing of button.onclick execution

3 Answers3

Linked