JavaScriptにて投稿機能を作成中にエラーが発生しました。
解決したいこと
Uncaught TypeError: deleteButtonClick.addEventListener is not a function
HTML/css/javascriptにて投稿機能を作っています。
名前とニックネームを追加３回したら追加ボタンを非表示にし、削除ボタンを押したら再表示できるようにしたく作成したましたが、エラーが発生してしまい困っております。どなたか解決方法教えていただけますと幸いです。
発生している問題・エラー
Uncaught TypeError: deleteButtonClick.addEventListener is not a function
該当するソースコード
<!DOCTYPE html>
<html>
<head>
<title>アカウント登録</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
th,td{
/* ヘッダ背景塗りつぶし */
background: #eee;
}
th,td {
/* 枠線を1本線指定 */
border: solid 1px;
width:auto;
}
table{
/* 枠線を1本線指定 */
border: solid 1px;
border-collapse: collapse;
white-space: nowrap;
}
/*.deletion{
width: 50px;
margin-left: 450px;
display: block;
position:relative;
bottom:220px;
margin-bottom: 80px;
}*/
.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="name" name="name" 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>
</div>
</div>
</div>
</div>
</div>
<div id="overLay">
</div>
<script language="Javascript">
var count=0;
let table;
let rows;
let tuikaBtn = document.getElementById("tuikaBtn");
tuikaBtn.addEventListener("click",function() {
var name = document.getElementById("name").value;
var nickname = document.getElementById("nickname").value;
//var body = document.getElementsByTagName("body")[0];
//テーブル
const result = document.getElementById("result")
var table = document.createElement('table');// table要素を生成
table.id = 'table';
var tr = document.createElement('tr');// tr要素を生成
var th = document.createElement('th');// th要素を生成
var td = document.createElement('td'); // td要素を生成
var thead = document.createElement('thead');//thead要素
var child = document.createElement("td");
var child1 = document.createElement("td");
result.appendChild(table);
table.appendChild(thead);
thead.appendChild(tr);
tr.appendChild(child);
tr.appendChild(child1);
//削除ボタン
const delButton = document.createElement('input');
delButton.classList.add('deletion');
delButton.type = 'button';
delButton.value = `削除`;
delButton.setAttribute('onclick', 'remove(this)');
tr.appendChild(delButton);
delButton.style.width = '50px';
delButton.style.height = '40px';
if(!name || !nickname ){
flag = 1;
window.alert('必須項目未入力'); // 入力漏れがあれば警告ダイアログを表示
return false;
}
if (!window.confirm(name + "さん " + nickname +"を登録します。よろしいですか？" ))
{ return false;
}
window.alert(name + "さん" + nickname+ "にて登録しました。");
child.textContent=("名前"+name)
child1.textContent=("ニックネーム"+nickname);
rows = table.rows;
//３回投稿で非表示
if(count < 2){
count++;
return true;
} else {
let tuika = document.getElementById("tuikaBtn");
tuika.style.visibility="hidden";
return false;
}
});
let deleteButtonClick;
//削除
function remove(target) {
let tr = target.parentNode.parentNode;
tr.remove();
if (count > 1) {
count ++;
const deleteButtonClick = document.getElementsByClassName('deletion');
deleteButtonClick.addEventListener('click',()=> {
tuikaBtn.classList.add('block');
}, false);
}
}
</script>
</body>
</html>
エラー発生コード
function remove(target) {
let tr = target.parentNode.parentNode;
tr.remove();
if (count > 1) {
count ++;
const deleteButtonClick = document.getElementsByClassName('deletion');
deleteButtonClick.addEventListener('click',()=> {
tuikaBtn.classList.add('block');
}, false);
1
