将变量的值传递给事件 function

Question

我有一些 javascript 创建一些带有点击事件的按钮到 function 传递该按钮的标识符。 标识符是创建它们的代码中的一个变量。 但是，变量是通过引用传递的，因此 function 获取的值是变量的最后设置值，而不是创建按钮时的值。

这似乎是一个非常简单和常见的飞行员错误，但我在这里或更广泛的 web 上找不到任何答案。

In the example below, I'm wanting ClickedID in the Buttonclicked function to be the value of ButtonID in the CreateButtons function at the time the button was created (and shows in the button's caption), not what ButtonID was when the function completed.

 function CreateButtons() { var Buttons = document.getElementById("Buttons"); var Button = null; var ButtonID = 0; for (ButtonID = 0; ButtonID < 6; ButtonID++) { Button = document.createElement("button"); Button.appendChild(document.createTextNode("Button " + ButtonID)); Button.onclick = function() {ButtonClicked(ButtonID);}; Buttons.appendChild(Button); } } function ButtonClicked (ClickedID) { alert("You clicked button " + ClickedID); }

 button { display: block; width: 150px; margin-bottom: 10px;

 <button onclick="CreateButtons();">Create Buttons</button> <div id="Buttons"></div>

Answer 1

<= ES5

您可以使用IIFE（立即调用 Function 表达式）轻松实现此目的

您正在获取循环结束的buttonID ，即6 。 您可以做的是创建一个IIFE ，以便每次迭代都创建一个新的scope和新的ButtonID 。

 function CreateButtons() { var Buttons = document.getElementById("Buttons"); var Button = null; let ButtonID = 0; for (ButtonID = 0; ButtonID < 6; ButtonID++) { (function(btnId) { // change Button = document.createElement("button"); Button.appendChild(document.createTextNode("Button " + btnId)); Button.onclick = function() { ButtonClicked(btnId); }; Buttons.appendChild(Button); })(ButtonID); // change } } function ButtonClicked(ClickedID) { alert("You clicked button " + ClickedID); }

 button { display: block; width: 150px; margin-bottom: 10px; }

 <button onclick="CreateButtons();">Create Buttons</button> <div id="Buttons"></div>

从 ES6 ## - 使用let 。 Let 和 const 声明一个阻塞的作用域局部变量

只需创建一个新的本地 scope 变量如下

for (let ButtonID = 0; ButtonID < 6; ButtonID++) {

 function CreateButtons() { var Buttons = document.getElementById("Buttons"); var Button = null; for (let ButtonID = 0; ButtonID < 6; ButtonID++) { Button = document.createElement("button"); Button.appendChild(document.createTextNode("Button " + ButtonID)); Button.onclick = function() { ButtonClicked(ButtonID); }; Buttons.appendChild(Button); } } function ButtonClicked(ClickedID) { alert("You clicked button " + ClickedID); }

 button { display: block; width: 150px; margin-bottom: 10px; }

 <button onclick="CreateButtons();">Create Buttons</button> <div id="Buttons"></div>

Answer 2

您可以使用let代替var来解决此问题：

for (let ButtonID = 0; ButtonID < 6; ButtonID++)

代替

var ButtonID = 0;

你可以在这里找到文档。

let创建块范围的变量（因此附加到for循环），而var创建一个函数范围的变量（附加到CreateButton函数）。

在var的情况下，当onclick被调用时， ButtonID为 6，因为循环已完成。 如果let循环内的每个ButtonID值被保留并且onclick处理程序 function 可以访问。

此处详细说明了此用例。 它包含两种解决方案 - 使用let和 IIFE（由 decpk 发布）

 function CreateButtons() { var Buttons = document.getElementById("Buttons"); var Button = null; for (let ButtonID = 0; ButtonID < 6; ButtonID++) { Button = document.createElement("button"); Button.appendChild(document.createTextNode("Button " + ButtonID)); Button.onclick = function() {ButtonClicked(ButtonID);}; Buttons.appendChild(Button); } } function ButtonClicked (ClickedID) { alert("You clicked button " + ClickedID); }

 button { display: block; width: 150px; margin-bottom: 10px;

 <button onclick="CreateButtons();">Create Buttons</button> <div id="Buttons"></div>