アラートが三回表示されてしまう

else ifでアラートの表示をしたいのですが、一番最後の'IDまたはパスワードが一致しません'のアラートが三回でてしまい困っています。一回で済むようにするにはどうすればよろしいでしょうか？
`

function logincheck(){
const id = document.getElementById('id').value;
const pw = document.getElementById('pas').value;

//ユーザー仮ナンバー
const usernum=[
['ss', '2222'],
['df', '4444'],
['we', '5555'],
];

//ID PW未入力時
if(id === "" && pw === ""){
  alert("IDとパスワードは必須入力です");
//ID未入力時
}else if(id === ""){
  alert("IDは必須入力です");
//PW未入力時
}else if(pw === ""){
  alert("パスワードは必須入力です");
}else{
//ID PW一致チェック
  usernum.forEach(item =>{
    if(item[0] === id && item[1] === pw){
        window.location.href='トップ画面.html';
    }else{
      alert("IDとパスワードが一致しません");
    }
  });
}
}
```

K_3578

2021/06/08 01:28

ソースコードはMarkDownのcode機能で囲んで提示ください。

m.ts10806

2021/06/08 01:35

Javascriptだけだと再現できませんので、ご配慮願います

K_3578

2021/06/08 01:55

なぜJavaタグ？JavaScriptとは別物です。

tomokia

2021/06/08 02:15

MarkDownで囲みました。見にくくて申し訳ないです。タグをJava→Javascriptに変更しました。ご指摘ありがとうございます。

1T2R3M4

2021/06/08 19:11 編集

https://ja.stackoverflow.com/questions/77406 https://qiita.com/x9jdzhcc72mxib2azgcyo/questions/e5543d63e83cf3ba05d7 以下ご対応ください。 https://teratail.com/help#posted-otherservice

行動規範の内容に同意します

回答2件

ベストアンサー

js
1//ID PW一致チェック
2usernum.forEach(item =>{
3  if(item[0] === id && item[1] === pw){
4    window.location.href='html トップ画面.html';
5  }else{
6    alert("IDまたはパスワードが一致しません");
7  }
8});

usernumが3要素あって、それぞれにalert()を出しているので、3回alert()が出ます。

欲しい動作は、「usernumのどれかにマッチしたらページ遷移、どれにもマッチしなかったらalert()」でしょう。

js
1if (usernum.findIndex(item => itemがidとpwにマッチしていたらtrue) >= 0) {
2  window.location...
3else
4  alert(...);

投稿2021/06/08 02:11

int32_t

総合スコア20860

tomokia

2021/06/08 02:56 編集

つまり、if(usernum.findIndex (item = > item[0] === id && item[1] === pw )>= 0)ていうことですかね；；

int32_t

2021/06/08 06:13

そうですね。

tomokia

2021/06/08 06:36

int32_t

2021/06/08 06:39

"= >" を "=>" にしたら動きますか?

tomokia

2021/06/08 06:52

変更しましたが治りませんでした。htmlの方に問題があるのですかね？一応載せておきます。 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="login.js" charset="shift_jis"></script> <link rel="stylesheet" href="login.css"> <script type="text/javascript" src="login.js" charset="uft-8"></script> </head> <table> <tr> <th>ID</th> <th><input class="nat"type="text" size"12" id="id" name="id"></th> </tr> <tr> <th>パスワード</th> <th><input class="nut" type="text" id="pas" name="pas" ></th> </tr> <tr> <th></th> <th><input class="contactrenzu" onclick=" logincheck()" type=submit value="次へ" ></th> </tr> </table> </html>

int32_t

2021/06/08 06:57

動かない、というのは具体的にどういう症状ですか? alert()はもう3回出ないですよね。ブラウザの開発者ツールのコンソール何かエラーは出ていますか? ブラウザの開発者ツールで logincheck() 内をステップ実行してみたら何かわかるかもしれません。

tomokia

2021/06/08 07:10

htmlファイルをchromeにぶち込んで操作確認しています。それで、値を入力して次へボタンを押下してもアラート表示されません。三回アラート表示が出ていた際は、～は必須ですアラートも表示されていました。

int32_t

2021/06/08 07:15

JavaScriptコードの括弧の対応が取れているか確認してください。それと、開発者ツールの使い方を覚えましょう。とりあえずHTMLページのどこかで右クリックして「検証」です。

tomokia

2021/06/08 07:27

検証したところ”Uncaught SyntaxError: Unexpected end of input”となっておりました。これは括弧のコードが対応していないということでしょうか？