for文の条件がエラーになる理由を知りたい。

Question

var num = document.getElementsByClassName("num");
  var num 1から10 = document.getElementById("num 1から10");の宣言OK
  
  for ( i =0; i < num.length; i++ )
  {
    num[i].addEventListener("blur",function()
    {  
    var array = [];
    for ( i =0; i < num.length; i++ )//for( i=0; i< num.length; i++)で動かない理由を知りたい、for( i=1; i < num.length +1; i++ )だと10個の値を取得できる。
    {
    array.push(document.getElementById('num' + i.toString()).value);
    }
    
    console.log(array);
  });

知りたい事
・テキスト10個に値が入力され、カーソルが外れたら入力された値を配列に追加するようにした。
arrayに値を追加するfor文の条件が、for( i =0; i < num.length; i++)で動くかと思いきや、値を取得できずエラーになる。
for( i =1; i < num.length +1 ; i++)だと問題なく
テキスト1～10までに入力された値を10個配列にする事ができたのですが(コンソールログで確認済み）
仕組みがわかりませんので教えて欲しいです。
配列は0から始まるから～…？

そしてfor( i =1; i < num.length +1 ; i++)の方法があっているのか教えてください。

for文の条件がエラーになる理由を知りたい。

Comments

[y_waiwai]

エラーが出るならエラーメッセージを提示してください。

Answer 1

なにか回りくどい感じですが、こういうことですか？

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var num  =document.getElementsByClassName("num");
  var num1 =document.getElementById("num1");
  var num2 =document.getElementById("num2");
  var num3 =document.getElementById("num3");
  var num4 =document.getElementById("num4");
  var num5 =document.getElementById("num5");
  var num6 =document.getElementById("num6");
  var num7 =document.getElementById("num7");
  var num8 =document.getElementById("num8");
  var num9 =document.getElementById("num9");
  var num10=document.getElementById("num10");

for ( i =0; i < num.length; i++ ){
  num[i].addEventListener("blur",function(){  
    var a = [];
    for ( i =0; i < num.length; i++ ){
      a.push(document.getElementById('num' + (i+1).toString()).value);
    }
    console.log(a);
  });
}
});
</script>
1:<input class="num" id="num1" value="val1"><br>
2:<input class="num" id="num2" value="val2"><br>
3:<input class="num" id="num3" value="val3"><br>
4:<input class="num" id="num4" value="val4"><br>
5:<input class="num" id="num5" value="val5"><br>
6:<input class="num" id="num6" value="val6"><br>
7:<input class="num" id="num7" value="val7"><br>
8:<input class="num" id="num8" value="val8"><br>
9:<input class="num" id="num9" value="val9"><br>
10:<input class="num" id="num10" value="val10"><br>

Comments

[mi_mi]

yambejpさんありがとうございます。num0の値がないのでエラーになる事が
わかりました。ppnさんの回答と合わせて理解する事ができました。
助かりました！

Answer 2

for文の条件式じゃなく、次の所でエラーになってませんか？
iが0から始まると、idがnum0のものがみつからずエラーになるとか。

 array.push(document.getElementById('num' + i.toString()).value);

コードにあるコメントの箇所でエラーにはならないかと、
そこでなるなら、その前のforの条件式でエラーになるはずなので。

あと、for(i =0;...) ... for(i=0; ...) と、同じ変数名を使ってるので、動作がおかしくなると思いますよ。

Comments

[mi_mi]

ppnさんいつもありがとうございます！
idがnum0のものがみつからずエラーになるとか。
→まさにその通りでした、num0の値が無いのでエラーになってしまうのですね！
どうもありがとうございます。
詰まっていたので考えられなかったです。すっきりしました

[退会済みユーザー]

すっきりされたようでよかったです。

[mi_mi]

letですね。かしこまりました！
letの動きを調べてみました。ありがとうございます。

ar hensuu = "変数1";
var hensuu = "変数2";

console.log(hensuu); // 変数2と表示　最初の宣言は上書きされる

let hennsuu = "へんすう";
let hennsuu = "へんすう２";
console.log(hennsuu); // Idemtifer 'hennsuu' has already been declardとエラーになる
　　　　　　　　　　　 // 変数'hennsuu'はすでに宣言済みです

[退会済みユーザー]

ごめんなさい、さっき嘘書いちゃってました(;; for(let i=0;...){for(let i=0;...)}は動いちゃいますね。
参考にした記事(https://qiita.com/y-temp4/items/289686fbdde896d22b5e)

[mi_mi]

ppnさんご丁寧にありがとうございます！