質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.57%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,533

mi_mi

score 19

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文の条件がエラーになる理由を知りたい。
  

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • y_waiwai

    2018/10/23 18:19

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

    キャンセル

回答 2

checkベストアンサー

0

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/23 22:22

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

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

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

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

    キャンセル

  • 2018/10/23 22:25

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

    キャンセル

  • 2018/10/23 22:53

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

    キャンセル

0

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

<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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/23 22:24

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.57%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る