ループ内で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

6は最後の値である、あなたが変更に呼び出す関数がためには、その範囲内の最後の値だけを覚えているだろうので、それは、常に私の最後の値を示していますそれを解決するには、新しいスコープを作成する必要がありますので、関数はIIFEで実行できる現在の値を覚えています。 ES6を使用して

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>

別の解決策これは、ブロック値がループのみに生きる変数をスコープであることから、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); 

}