将 OnClick 属性添加到数组 javascript答案

【问题标题】：Adding OnClick property to array javascript将 OnClick 属性添加到数组 javascript
【发布时间】：2014-11-08 21:58:11
【问题描述】：

我正在尝试将数组添加到我的简单 JavaScript 计算器的 onclick 按钮中。

我的第一次尝试是代码中的process(text[i]);，但它根本不起作用。

所以，我将数组项转换为字符串并提供给 onclick 函数。然后它以一种奇怪的方式运行。

你能告诉我如何传递给正确的类型吗？

var text = ["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"];

for (var i = 0; i < text.length; i++) {
  var child = document.createElement('button');
  child.innerText = text[i];
  child.value = text[i];
  var temp = text[i].toString();   //<-- convert to make sure it is string

  child.onclick = function () {                
    process(temp);   //<-- it doesn't work properly, and it won't accept "process(text[i])???".
  }

  label1.appendChild(child);
}        

document.body.appendChild(label1);

【问题讨论】：

标签： javascript arrays onclick

【解决方案1】：

我必须离开我的电脑，但下面几乎可以正常工作了。 ops 进入设置的 onclick 后未定义。不知道为什么。希望其他人可以以此为基础。

function process(operation) {
  alert(operation);
}

var ops = ["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"];

for (var i = 0; i < ops.length; i++) {
  var child = document.createElement('button');
  child.innerText = ops[i];
  child.value = ops[i];

  (child.onclick = function() {

    process(ops[i]);
  })(i)

  // label1.appendChild(child);
  document.body.appendChild(child);
}

// document.body.appendChild(label1);

【讨论】：

作为adeno 的建议，我在您的代码中添加了“function (i)”的附件。那么它也可以正常工作。谢谢。
@tomtom，非常棒。您可以单击左侧箭头下方的复选标记以表明此答案是您问题的解决方案吗？

【解决方案2】：

正如@adeneo 已经很好解释的那样，问题在于所有onclick 处理程序都使用相同的temp 变量。为每次迭代提供单独范围的另一种方法是使用 forEach 方法而不是 for 循环：

["+", "-", "*", "/", "SQRT", "POW", "RNDM", "MAX", "MIN"].forEach(function(text) {
    var child = document.createElement('button');
    child.innerText = text;
    child.value = text;
    child.onclick = function () {
        process(text);
    }
    label1.appendChild(child);
});

示例： http://jsfiddle.net/kq1mpm3g/

【讨论】：