###前提・実現したいこと
javascript初学者です。
テキストボックスに日付っぽい文字列を入力してもらうため、フォーカスが外れたら正規表現の判定をするような仕組みを作りました。
コードを簡潔にすべく以下のような感じです。
###該当のソースコード
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .dateError{ display:none; color:red; } </style> </head> <body> <form> <p><input type="text" placeholder="yyyy/mm/dd"><span class="dateError">違うよ</span></p> <p><input type="text" placeholder="yyyy/mm/dd"><span class="dateError">違うよ</span></p> <p><input type="text" placeholder="yyyy/mm/dd"><span class="dateError">違うよ</span></p> </form> <script> (function(){ "use strict" var Dates=document.getElementsByTagName("input"), DateErrors=document.getElementsByClassName("dateError"); function AE(i){ Dates[i].addEventListener("blur",function(){ if(this.value.match(/^\d{4}\/\d{2}\/\d{2}$/)){ DateErrors[i].style.display="none"; } else{ DateErrors[i].style.display="inline"; } }); } AE(0); AE(1); AE(2); })(); </script> </body> </html>
###発生している問題・エラーメッセージ
function AEに0~2を入れているので、これをforで回そうとしたらエラーとなります。
for(var i=0; i<=2; i++){ Dates[i].addEventListener("blur",function(){ if(this.value.match(/^\d{4}\/\d{2}\/\d{2}$/)){ DateErrors[i].style.display="none"; } else{ DateErrors[i].style.display="inline"; } }); }
いわく、
Uncaught TypeError: Cannot read property 'style' of undefined at HTMLInputElement.<anonymous>
###試したこと・疑問
質問のためこのような流れで説明しましたが、もともとはforでやってみたらうまくいかなくて、関数で試してみたらなぜか動いたという状況です。
なぜforでは動かないのか?
エラーの内容だとDateErrors[i]が定義されてないということのようですが、それだと関数の場合にはなぜちゃんと動くのか?
そのような疑問から質問させていただきました。
基礎知識不足は承知の上ですが、何卒ご教授いただければ幸いです。
よろしくお願いします。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/25 10:21