Question

我想写一个包含10个按钮的简单HTML文件，每个按钮的文本从0到9，当点击一个按钮时，它会在控制台上显示与之对应的数字。必须在javascript文件中动态创建按钮。

这是我的代码：

HTML文件：

<!DOCTYPE HTML>
<head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  <!-- JQuery script -->
    <script src="test.js"></script>
</head>
<body>
 <div id="maindiv"></div> <!-- This div will contain the buttons. -->
</body>

Javascript （test.js）文件：

$(document).ready(function () {
    DOM_ready();
});

function DOM_ready() {
    var maindiv = document.getElementById("maindiv");
    var button_create_aux;
    for (var i = 0; i < 10; i++) {
        button_create_aux = document.createElement('button');
        button_create_aux.innerHTML = i; // sets the button text corresponding to its iteration value.

        $(button_create_aux).click(function () {
            clicked(i);
        });

        maindiv.appendChild(button_create_aux);
    }
}

function clicked(num) {
    console.log(num);
}

问题在于，当我单击HTML页面中的按钮时，它始终在控制台上显示给予for循环中使用的变量 i 的最后一个值（在本例中为10）

看起来行点击（i）; 传递的参数是对变量 i 的引用，而不是它的值，所以我想要一种方法传递 i 在循环的每次迭代中都具有的值。

将变量的值传递给Javascript

0 个答案: