在循环中创建Onchange功能

Question

我正在为for循环创建动态输入。每个输入都有其自己的onchange函数，该功能检查其值是否大于数组值。在每个onchange函数中，arrId变量始终是6，这是数组中的最后一个元素。

是否有可能使其正确？如果说我先更改第一个输入，则arrId应该是数组中的第一个元素，而不是最后一个元素。但是arrId始终是数组中的最后一个元素。

var arr = ["22", "12", "15", "6"];
for (var i = 0; i < arr.length; i++) {
  var arrId = arr[i];
  var input = document.createElement("input");
  input.value = 0;
  input.type = "number";
  input.onchange = function(x) {
    console.log(x.target.value + " " + arrId);
    if (parseInt(x.target.value) > parseInt(arrId)) {
      x.target.value = arrId;
    }
  }
  document.getElementById("inputs").appendChild(input);
}

input {
  display: block;
  margin: 10px 0;
}

<div id="inputs">
</div>

Answer 1

它始终显示i的最后值，因为6是最后一个值，您所调用的更改的函数只会记住其范围中的最后一个值，以便求解您需要创建一个新的范围，以便该功能会记住您可以使用IIFE进行的当前值。

var arr = ["22", "12", "15", "6"];
for (var i = 0; i < arr.length; i++) {
  var arrId = arr[i];
  var input = document.createElement("input");
  input.value = 0;
  input.type = "number";
  (function(i,input){
    input.onchange = function(x) {
      console.log(x.target.value + " " + i);
      if (parseInt(x.target.value) > parseInt(arrId)) {
        x.target.value = arrId;
      }
    }
  })(arrId,input);
  
  document.getElementById("inputs").appendChild(input);
}

input {
  display: block;
  margin: 10px 0;
}

<div id="inputs">
</div>

使用ES6的另一个解决方案是用LET声明您的变量，因为这是块范围变量，该值仅在循环中生存。

var arr = ["22", "12", "15", "6"];
for (let i = 0; i < arr.length; i++) {
  let arrId = arr[i];
  let input = document.createElement("input");
  input.value = 0;
  input.type = "number";
    input.onchange = function(x) {
      console.log(x.target.value + " " + arrId);
      if (parseInt(x.target.value) > parseInt(arrId)) {
        x.target.value = arrId;
      }
    }
  
  document.getElementById("inputs").appendChild(input);
}

input {
  display: block;
  margin: 10px 0;
}

<div id="inputs">
</div>

Answer 2

重要：JavaScript没有块范围。带有块引入的变量范围范围范围范围内包含的函数或脚本，并且将它们设置为块本身的效果持续存在。换句话说，块语句不会引入范围。尽管"独立"块是有效的语法，但您不想在JavaScript中使用独立的块，因为他们不做您认为自己做的事情，如果您认为他们在C或Java中做这样的块。

。

var arr = ["22", "12", "15", "6"];
var input = document.createElement("input");
input.value = 0;
 input.type = "number";
for (var i = 0; i < arr.length; i++) {
(function(val){
  var arrId = val;
    var input = document.createElement("input");
    input.value = 0;
    input.type = "number";
    input.onchange = function(x) {
      console.log(x.target.value + " " + arrId);
      if (parseInt(x.target.value) > parseInt(arrId)) {
        x.target.value = arrId;
      }
})(arr[i],input)
}
document.getElementById("inputs").appendChild(input);
}