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>
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
0
