Home/ Questions/Q 7731631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T06:31:48+00:00

I am trying to understand the Javascript event handling. I like some code to

  • 0

I am trying to understand the Javascript event handling. I like some code to be called when I press a button and added an eventlistener – my code:

<html>
 <head>
    <title>
        PDSA #4.4: Event Registering
    </title>
    <script>
        function changeTheButton(btn){
            btn.innerHTML = "Please, don't press again!";
            alert("Changed the button");
        }

        function init(){
            btn = document.getElementById("button1");
            btn.addEventListener("click", changeTheButton(btn), false);
        }
    </script>
 </head>
 <body onload="init()">
    <form>
        <button id="button1">Don't press this button</button>
    </form>
 </body>
</html>

When I open this site in Chrome or Firefox the text on the button is already “Please, don’t press again!” and the alert is opened before I do anything.

Why does this happen? I expected this to happen, when I press the button and not on load.

Thanks in advance for any help
André

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Watch this line:

    btn.addEventListener("click", changeTheButton(btn), false);

    You’re actually calling changeTheButton right there, resulting in the alert. You probably want to register it as an event handler instead, thus deferring the alert until the button is pressed:

    btn.addEventListener("click", function() { changeTheButton(btn) }, false);

    You can watch the result at jsFiddle.

    One additional problem you might experience is that the button click causes a page reload, because the default event handler is still called. You can prevent that by calling .preventDefault() on the event instance:

    function changeTheButton(ev, btn) {
    alert("Changed the button");
    btn.innerHTML = "Please, don't press again!";
    ev.preventDefault();
}

function init(){
    btn = document.getElementById("button1");
    btn.addEventListener("click", function(ev) { 
        changeTheButton(ev, btn) 
    }, false);
}

    Demo.

    • 0