[Q&A] アラート表示が出てしまう。

アラート表示が出てしまう。

解決したいこと

チェックボックスにチェックをいれてもアラートが表示されてしまい困っています。以前は表示されていなかったのですが、jsの先頭にチェックの値を保持するコードを入力したところアラートが出てしまっている次第です。

該当するソースコード

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="input2.css">
  <script type="text/javascript" src="input2.js" charset="shift_jis"></script>
 </head>


  <h2>2.申し込み情報入力</h2>
  <body>
 <table >

  <tr>
    <th>コース</th>
    <th></th>
  </tr>

  <tr>
    <th></th>
    <th>
    <input type="checkbox" name="course1"id="a"  value="A"> A

    </th>
  </tr> 

  <tr>
    <th></th>
    <th>
    <input type="checkbox" name="course1" id="a" value="B"> B
  </th>
  </tr>

   <tr>
     <th></th>
    <th>
    <input type="checkbox" name="course1"id="a"value="C"> C
  </th>
  </tr>  

   <th></th>
    <th>
    <input type="checkbox" name="course1"id="a"value="D"> D
  </th>
  </tr>  

   <tr>
     <th></th>
    <th>
    <input type="checkbox" name="course1" id="a"value="E"> E
  </th>
  </tr>  

  <tr>
  <th></th>
  <th></th>
  </tr>



   <tr>
    <th>お支払い方法</th>
    <th><input type="radio" name="level" id="level"value="代金引換">代金引換</th>
  </tr>  

   <tr>
    <th></th>
    <th><input type="radio" name="level" id="level" value="コンビニ引き換え">コンビニ支払い</th>
  </tr>  

   <tr>
    <th></th>
    <th><input type="radio" name="level"id="level" value="クレジットk">クレジットカード</th>
  </tr>


  <tr>
  <td colspan="2">
  <input type="button" class="button" Value="戻る" onclick="history.go(-1);">
  <input type="button"  class="button"Value="次へ"  onclick="check()" >
  </td>
  </tr>

 </table>
 </body>
 </container>
</html>

例）

window.onload = function onLoad() {
//コース選択済み表示
const date = document.getElementsByName("course1");
if(sessionStorage.getItem('A') ==="true"){
    date[0].checked=true;
}
if(sessionStorage.getItem('B') ==="true"){
    date[1].checked=true;
}
if(sessionStorage.getItem('C') ==="true"){
    date[2].checked=true;
}
if(sessionStorage.getItem('D') ==="true"){
        date[3].checked=true;
}
if(sessionStorage.getItem('E') ==="true"){
    date[4].checked=true;
}

//お支払方法選択済み表示
    var elements = document.getElementsByName("level");
    var pay = sessionStorage.getItem("pay")
    switch(pay){
        case "代金引換":
            elements[0].checked=true;
            break;
        case "コンビニ支払い":
            elements[1].checked=true;
            break;
        case "クレジットカード":
            elements[2].checked=true;
            break;
        default:
            break;      
    }
}
function check(){
    //コースの値取得
    const course = [];
    const check = [];
    const a = document.getElementsByName("a");
    for(var i = 0; i < a.length; i++){
        if(a[i].checked){
            course.push(a[i].value);
        }
        check.push(a[i].checked);
    }

    //お支払方法の値取得
    var elements = document.getElementsByName("level");
    var len = elements.length;
    var pay = '';

    for (var i = 0; i < len; i++){
        if (elements.item(i).checked){
            pay = elements.item(i).value;
        }
    }

    //未入力チェック
    if(course.length === 0){
        alert("コースが選択されていません");
        return;
    }else if(pay.length === 0){
        alert("お支払方法が選択されていません");
        return;
    }

    sessionStorage.setItem('course', course);
    sessionStorage.setItem('pay', pay);
    sessionStorage.setItem('A',course[0]);
    sessionStorage.setItem('B',course[1]);
    sessionStorage.setItem('C',course[2]);
    sessionStorage.setItem('D',course[3]);
    sessionStorage.setItem('E',course[4]);
    window.location.href = 'html 申し込み画面.html';
}

自分で試したこと

ここに問題・エラーに対して試したことを記載してください。

@d833f posted at 2021-06-14

const a = document.getElementsByName("a");

は

const a = document.getElementsByName("course1");

ではないでしょうか？

0Like

アラート表示が出てしまう。

解決したいこと

該当するソースコード

自分で試したこと

1Answer

Comments

Your answer might help someone💌

Popular Questions