[Q&A] javascriptでイベントハンドラが発火しない

javascriptでイベントハンドラが発火しない

解決したいこと

下の方に”こっここっこ”書いているコメントアウトの下のclickイベントが発火しません。
テーブルの行を消す削除機能をつけたい
コードは悪しからず

発生している問題・エラー

<!DOCTYPE html>
<html>

<head>
  <title>アカウント登録</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .base {
      margin: 2% 7% 0;
      height: 500px;
      background: blue;
      padding: 5% 10%;
      box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
    }

    input {
      width: 300px;
      height: 40px;
      font-size: large;
    }

    #tuikaBtn {
      background: green;
    }

    h1 {
      font-family: serif;
    }

    .form-control::placeholder {
      color: #cacaca;
      opacity: 1;
    }

    table {
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid #312929;
      padding: 5px 10px;
    }

    .card {
      width: 100%;
      height: 350px;
    }

    .back {
      padding: 30px;
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .form-group {
      margin: 10px 0 15px 0px;
    }

    #result {
      font-size: 120%;
      margin: 10;
      margin: 10px 20px;
      padding: 10px 5px 20px;
      margin: 10px 5px 10px 5px;
    }

    .row .card {
      color: red;
    }

    .card {
      color: blue;
      display: block;
      position: relative;
    }

    #modal {
      display: none;
      margin: 1.5em auto 0;
      background-color: white;
      border: 1px solid black;
      width: 50%;
      padding: 10px 20px;
      position: fixed;
      border-radius: 5px;
    }

    #overLay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 120%;
      background-color: rgba(0, 0, 0, 0.75);
    }
  </style>
</head>

<body>
  <div class="base container">
    <div class="row">
      <h1>アカウント登録</h1>
    </div>
    <div class="row">
      <div class="card" id="card">
        <div class="card-block">
          <form id="form-area" class="form-inline" method="post">
            <div class="form-group">
              <div class="input-group">
                <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
              </div>
            </div>
            <div class="form-group">
              <div class="input-group">
                <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
              </div>
            </div>

            <div class="form-group">
              <input id="tuikaBtn" type="button" name="touroku" value="追加">
            </div>
          </form>
          <div id="tuikaMoto">

          </div>
          <div id="result"></div>
          <table>
            <thead>
              <th>名前</th>
              <th>ニックネーム</th>
            </thead>
            <tbody>

            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div id="overLay">
  </div>
  <script>
    // ここに処理を書いていきます。

    let tuika = document.getElementById("tuikaBtn");
    let count = 0;
    tuika.addEventListener("click", function () {
      let result = document.getElementById("result");
      let namea = document.getElementById("namae");
      let nickname = document.getElementById("nickname");
      let tbody = document.querySelector("tbody");

      if (namea.value != "" && nickname.value != "") {
        let is = window.confirm(namea.value + "さん" + nickname.value + "を登録します。よろしいですか？");

        if (is == true) {
          result.textContent = namea.value + nickname.value;
          alert(namae.value + "さん" + nickname.value + "にて登録しました。");

          tbody.insertAdjacentHTML("beforeend", "<tr> <td>" + namae.value + "</td>" + "<td>" + nickname.value + "</td><td><button class = 'sakujo' type = 'button'>削除</button></td></tr>");
          count++;
          if (count == 3) {
            tuika.style["display"] = "none";
          };
        };
      };
      });
      //こっこっここっここっここっこ
      let sakujo = document.getElementsByClassName("sakujo");
        for (var i = 0; i < sakujo.length; i++) {
          sakujo[i].addEventListener("click", function () {
            let grandParent = this.closest("tr");
            grandParent.remove();
            count--;
            tuika.style["display"] = "block";
          });
          console.log(count);
        };
  </script>
</body>

</html>

自分で試したこと

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

3Answer

@ss8826 posted at 2023-03-04

削除ボタンそのものにイベントリスナーを仕掛けるのではなく、削除ボタンより上位にある常に存在している要素に対してイベントリスナーを仕掛けておいてEvent.targetが削除ボタンだった場合にそのボタンの上位のtr要素を削除するのが簡単かと思います。

-      let sakujo = document.getElementsByClassName("sakujo");
-        for (var i = 0; i < sakujo.length; i++) {
-          sakujo[i].addEventListener("click", function () {
-            let grandParent = this.closest("tr");
-            grandParent.remove();
-            count--;
-            tuika.style["display"] = "block";
-          });
-          console.log(count);
-        };

+ document.addEventListener('click', e => {
+   if (e.target.classList.contains('sakujo')) {
+     e.target.closest('tr').remove();
+   }
+ });

@SurferOnWww posted at 2023-03-03

ブラウザのディベロッパーツールで見たらエラーがわかるのでは？

@h_kono0707 posted at 2023-03-04

JavaScriptが読み込まれた時点ではdocument.getElementsByClassName("sakujo");が一件も存在しないため、イベントが付与されません。
tuika.addEventListener("click", function () {}内で行を追加する際に合わせてイベントを付与してあげる必要があります。

if (is == true) {
  result.textContent = namea.value + nickname.value;
  alert(namae.value + "さん" + nickname.value + "にて登録しました。");
+ const row = document.createElement('tr');
+ row.insertAdjacentHTML("afterbegin", "<td>" + namae.value + "</td>" + "<td>" + nickname.value + "</td><td><button class = 'sakujo' type = 'button'>削除</button></td>");
+ row.querySelector(".sakujo").addEventListener("click", function () {
+   let grandParent = this.closest("tr");
+   grandParent.remove();
+   count--;
+   tuika.style["display"] = "block";
+ });
+ tbody.insertAdjacentElement("beforeend", row);
- tbody.insertAdjacentHTML("beforeend", "<tr> <td>" + namae.value + "</td>" + "<td>" + nickname.value + "</td><td><button class = 'sakujo' type = 'button'>削除</button></td></tr>");
  count++;
  if (count == 3) {
    tuika.style["display"] = "none";
  };
};

※//こっこっここっここっここっこより下は削除する

javascriptでイベントハンドラが発火しない

解決したいこと

発生している問題・エラー

自分で試したこと

3Answer

Your answer might help someone💌

Popular Questions