たこ

2022/6/30 22:55

22回答

javascriptで実行する学籍番号しか反応しないのですが、どうしてですか？

javascriptで実行する学籍番号しか反応しないのですが、どうしてですか？ あと、ボタンを押すと全て正しく入力されていたら「正しい」間違っていれば「学籍番号が間違っています」などをボタンを押すだけで正しいか、どこが正しくないかわかるプログラムはどうすればいいですか？ <p>学籍番号 <input type="text" id="sample" maxlength='9' onchange="check()"><br> <div type="text" id="out"></div> <script> function check(){ const out = document.getElementById("out"); var txt = document.getElementById("sample").value; var ck = /[A-Z]-?[0-9]{2}-?[A-Z]-?[0-9]{4}/.test( txt ); // 正規表現チェック if( ck ){ out.innerText = "問題あり"; } else { out.innerText = "なし" ; } }; </script> <p>郵便番号 <input type="tex" id="sample2" maxlength='9' onchange="check()"><br> <div type="tex" id="ou"></div> <script> function check(){ const ou = document.getElementById("ou"); var txt = document.getElementById("sample2").value; var c = ! /^[0-9]{3}-?[0-9]{4}$/.test( txt ); // 正規表現チェック if( c ){ out.innerText = "問題あり"; } else { out.innerText = "なし" ; } };

JavaScript・55閲覧

ベストアンサー

0
ybb********

カテゴリマスター

2022/7/1 1:19

ありがとうございますさん >･･･学籍番号しか反応しないのですが、･････ 修正例。ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> ::placeholder{ color: #666;} #sample{ margin: 10px; padding: 10px; border: 1px solid #777; border-radius : 7px; } </style> </head> <body> <p>学籍番号 <input type="text" id="sample" maxlength='9' onchange="check()"><br> <div type="text" id="out"></div> <script> function check(){ const out = document.getElementById("out"); var txt = document.getElementById("sample").value; var ck = /[A-Z]-?[0-9]{2}-?[A-Z]-?[0-9]{4}/.test( txt ); // 正規表現チェック if( !ck ){ out.innerText = "問題あり"; } else { out.innerText = "なし" ; } }; </script> <p>郵便番号 <input type="tex" id="sample2" maxlength='9' onchange="check2()"><br> <div type="tex" id="ou"></div> <script> function check2(){ const ou = document.getElementById("ou"); var txt = document.getElementById("sample2").value; var c = !/^[0-9]{3}-?[0-9]{4}$/.test( txt ); // 正規表現チェック if( c ){ ou.innerText = "問題あり"; } else { ou.innerText = "なし" ; } }; </script> </body> </html>

その他の回答（1件）

0
旬な人

2022/7/1 2:06

>javascriptで実行する学籍番号しか反応しないのですが、どうしてですか？ 問題が2つあって、 ①checkというfunctionが2重定義されていて、2つ目のみ有効となっている。 scriptタグは複数書いても同じスコープ内になるので、混乱するなら</html>の上に1つにまとめて書きましょう。 ②郵便番号側の結果出力処理が、誤字っている。 out.innerText = "問題あり"; ↓ ou.innerText = "問題あり"; outの宣言がないのにエラーが出ないのは、①で指摘の2重定義が影響していると思われる。 以下、ボタン押下イベントで動くプログラム。 気になるところは直してます。 <p> 学籍番号 <input type="text" id="sample" maxlength='9'><br> <div id="out"></div> </p> <p> 郵便番号 <input type="text" id="sample2" maxlength='9'><br> <div id="ou"></div> </p> <input type="button" value="button" onclick="buttonClick()"> <script> function buttonClick() { let out = document.getElementById("out"); let sample = document.getElementById("sample"); let ck = /[A-Z]-?[0-9]{2}-?[A-Z]-?[0-9]{4}/.test(sample.value); // 正規表現チェック let hit = null; if (ck) { out.innerText = "問題あり"; hit = sample; } else { out.innerText = "なし"; } out = document.getElementById("ou"); sample = document.getElementById("sample2"); ck = !/^[0-9]{3}-?[0-9]{4}$/.test(sample.value); // 正規表現チェック console.log(sample.value); if (ck) { out.innerText = "問題あり"; if (!hit) { hit = sample; } } else { out.innerText = "なし"; } hit?.focus(); }; </script>