Question

这不是重复的问题。

我有一个按钮列表，我希望在动态生成按钮时将其传递给唯一值，如下所示。

预期结果：我希望警报在生成时显示“ Hello World”和“按钮索引”。

当前结果：警报不断显示“ Hello World 20”。 20是for循环的最后一个索引。

<!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>

Answer 1

您正在使用原始JavaScript。为了使用索引，可以将其保存在属性中。我创建了一个data-index-button属性以获取它，并使用它来显示单击按钮时的索引。

    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);
        }

    }

Answer 2

您必须为button onclick写另一种方法。我只是使用clickMe()方法更新您的代码。试试这个，希望对您有所帮助。谢谢

<!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>

如何为HTML按钮动态设置onClick事件并传递唯一值

2 个答案: