Script doesn't wait for onclick event

Question

In the code below, why does the header text change on page load, and not only after the button is clicked?

<h1 id="header">This is a header</h1>
<button id="btn1">Change text</button>
<script>
  function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}

button1 = document.getElementById("btn1")
button1.onclick = change_text("header", "something")
</script>

You are setting the onclick to a function execution not a function definition. So when the onclick is defined it will execute the function. So you would want something more like: button1.onclick = function() { change_text("header", "something"); } — pasquers, Mar 08 '18 at 19:38
Because you're setting your onclick to the function, which runs the function. This isn't how you would perform this task. — adprocas, Mar 08 '18 at 19:38
Another duplicate, specific to event handlers: [Why does click event handler fire immediately upon page load?](//stackoverflow.com/q/7102413) — Heretic Monkey, Mar 08 '18 at 19:46

score 2 · Answer 1 · answered Mar 08 '18 at 19:44

If you wanted to reuse that function and keep the onclick out of the markup, you could do this:

<h1 id="header">This is a header</h1>
<button id="btn1">Change text</button>
<script>
function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}

button1 = document.getElementById("btn1")
button1.onclick = function () {
    change_text("header", "something");
}
</script>

This uses something called an anonymous function.

Learn more here: JavaScript Functions

score 1 · Answer 2 · answered Mar 08 '18 at 19:39

Can you try:

<h1 id="header">This is a header</h1>
<button onclick="change_text('header', 'something')" id="btn1">Change text</button>
<script>
  function change_text(target_id, target_text) {
    document.getElementById(target_id).textContent = target_text;
}
</script>

I am pretty confident that will work as intended for you..

score 1 · Accepted Answer · answered Mar 08 '18 at 19:45

The issue is this line:

button1.onclick = change_text("header", "something")

The JS engine will do the following in this order:

Call change_text with the arguments "header" and "something"
Assign the result of change_text (in this case, undefined) to button1.onclick

Jane Doe's answer should work. If you want to keep your current code structure, then you could use the following:

button1.onclick = function(){
    change_text("header", "something");
};

This creates an anonymous function and assigns it to onclick. When onclick is triggered, it will execute the function which calls change_text.

score 0 · Answer 4 · answered Mar 08 '18 at 19:40

The reason is simple: you have already called change_text("header", "something") in your code. You are basically doing the same thing as:

let res = change_text("header", "something") // already called, res is undefined
button1.onclick = res

If you are actually passing an event handler, it should looks like button1.onclick = change_text, with change_text() taking an event as param instead. OR as seen in the other answer, <button onclick="change_text('header', 'something')" id="btn1">Change text</button> (this creates an anonymous function that would be called on click event)

Script doesn't wait for onclick event

4 Answers4

Linked

Related