CODEWITHSUNDEEP
javascriptbutton
CodeBlue
CodeBlue

Reputation: 15409

How to add event listener to many buttons in JavaScript?

Here's my code. It correctly adds buttons using JavaScript, but the event listener doesn't work as expected. The output in the text area is always button100, no matter which button I click. Well, the button click doesn't change anything for any of the buttons, which makes me think the listener is not getting added correctly. 

<html>
    <head><title>Many buttons</title></head>

    <body id="theBody">
    <br><br>
    <textarea id="debugConsole" rows="4" cols="50"></textarea>
    <script type="text/javascript">

    for (var i = 1; i <= 100; i ++) {
        var button = document.createElement('input');
        button.type = "button";
        button.value = "button" + i;
        button.onclick = clickHandler(button);
        document.getElementById("theBody").appendChild(button);
    }

    function clickHandler(button) {
        console.log('clicked');
        var value = button.value;
        debugConsole.value = value;
    }


    </script>


    <body>

</html>

I'm not sure where the mistake is. Shouldn't the for loop add the clickHandler() to all buttons?

Upvotes: 1

Views: 1061

Answers (4)

mcn
mcn

Reputation: 721

onclick is a function so you should pass the value button.onclick = function instead of button.onclick = function(node).

Here is the correct way to do it

HTML

<html>
    <head><title>Many buttons</title></head>

    <body id="theBody">
    <br><br>
    <textarea id="debugConsole" rows="4" cols="50"></textarea>
    <script type="text/javascript">

    for (var i = 1; i <= 100; i ++) {
        var button = document.createElement('input');
        button.type = "button";
        button.value = "button" + i;
        button.onclick = clickHandler;
        document.getElementById("theBody").appendChild(button);
    }

    function clickHandler(event) {
        document.getElementById('debugConsole').value = event.target.value;
    }


    </script>


    <body>

</html>

Demo:

PLAYGROUND

Upvotes: 0

ROMANIA_engineer
ROMANIA_engineer

Reputation: 56724

<html>
    <head><title>Many buttons</title></head>

    <body id="theBody">
    <br><br>
    <textarea id="debugConsole" rows="4" cols="50"></textarea>
    <script type="text/javascript">

    for (var i = 1; i <= 100; i ++) {
        var button = document.createElement('input');
        button.type = "button";
        button.value = "button" + i;
        button.onclick = clickHandler;
        document.getElementById("theBody").appendChild(button);
    }

    function clickHandler() {
        console.log(this.value);
        document.getElementById('debugConsole').value = this.value;
    }


    </script>


    <body>

</html>

Upvotes: 0

Brunis
Brunis

Reputation: 1063

You are executing the clickHandler when you add (); you need to just specify the callback by name:

button.onclick = clickHandler;

You can all always find the element that fired the event by passing (e), so your clickHandler should do this:

function clickHandler(e) {
  var originElement = e.target;
}

Upvotes: 1

markbernard
markbernard

Reputation: 1420

Your code:

button.onclick = clickHandler(button);

Is not assigning the function clickHandler to the event, it is assigning the result of the return value of invoking clickHandler. The result is undefined or null since there is no explicit return for the function.

This is what you need.

<html>
    <head><title>Many buttons</title></head>

    <body id="theBody">
    <br><br>
    <textarea id="debugConsole" rows="4" cols="50"></textarea>
    <script type="text/javascript">

    for (var i = 1; i <= 100; i ++) {
        var button = document.createElement('input');
        button.type = "button";
        button.value = "button" + i;
        button.onclick = clickHandler;
        document.getElementById("theBody").appendChild(button);
    }

    function clickHandler(event) {
        console.log('clicked');
        var value = event.target.value;
        debugConsole.value = value;
    }


    </script>


    <body>

</html>

I would have to double check event.target.value, but that is the gist of what you need.

Upvotes: 3

Related Questions