How to dynamically set onClick event for HTML Button and pass in a Unique Value

Question

This is not a duplicate question.

I have a list of buttons that I want to pass a unique value into when it's dynamically generated as shown below.

Expected outcome: I want the alert to show "Hello World" plus Index Of The Button when it was generated.

Current Outcome: alert is constantly showing "Hello World 20". 20 being the last index of the for loop.

<!DOCTYPE html>
<html>

<body onload="genManyBtns()">
    <p>Click the button to show an Alert Corresponding to it's Index</p>

    <script>
        function genManyBtns() {
            for (var i = 0; i < 20; i++) {
                var btn = document.createElement("BUTTON");
                btn.innerHTML = "CLICK ME";
                btn.onclick = function() {
                    alert("Hello World " + i)
                };
                document.body.appendChild(btn);
            }

        }
    </script>

</body>

</html>

See this https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — samsonthehero, Apr 07 '19 at 16:44
That code seems correct since `var i = 0` should be a block scope declaration limited to the for-loop. You could try changing `var` to `let` and/or declare it outside the for-loop as `var i;` then just initialize `i = 0` in the first loop clause. — jlau, Apr 07 '19 at 16:46

score 0 · Accepted Answer · answered Apr 07 '19 at 16:47

You are using vanilla JavaScript. In order to use the index, you can save it in an attribute. I created a data-index-button attribute in order to get it and use it to show the index of the button when it is clicked.

    function genManyBtns() {
        for (var i = 0; i < 20; i++) {
            var btn = document.createElement("BUTTON");
            btn.setAttribute("data-index-button", i);
            btn.innerHTML = "CLICK ME";
            btn.onclick = function() {
                var index_button = this.getAttribute("data-index-button");
                alert("Hello World " + index_button);
            };
            document.body.appendChild(btn);
        }

    }

score 0 · Answer 2 · answered Apr 07 '19 at 17:15

You have to write another method for button onclick. I just update your code with clickMe() method. Try this I hope it'll help you out. Thanks

<!DOCTYPE html>
<html>

<body onload="genManyBtns()">
    <p>Click the button to show an Alert Corresponding to it's Index</p>

    <script>
        function genManyBtns() {
            for (var i = 0; i < 20; i++) {
                var btn = document.createElement("BUTTON");
                btn.innerHTML = "CLICK ME";
                btn.className = "clickMe";
                btn.setAttribute('data-index', i);
                document.body.appendChild(btn);
            }
        }
        
        document.addEventListener('click', function (e) {
          if (e.target.matches('.clickMe')) {
            e.preventDefault();
            alert("Hello World " + e.target.dataset.index);
          }                        
        }, false);
        
    </script>

</body>

</html>

How to dynamically set onClick event for HTML Button and pass in a Unique Value

2 Answers2