名前、ニックネームを追加時、各行の右に削除ボタンを出力して、 削除ボタンをクリックするとボタンがある行を削除する処理を作成したいのですが 何度実行しても削除ボタンが実行されません。
Q&A
Closed
名前、ニックネームを追加時、各行の右に削除ボタンを出力して、
削除ボタンをクリックするとボタンがある行を削除する処理を作成したいのですが
何度実行しても削除ボタンが実行されません。
しかし、コンソールにエラーも出ません。。（；；）
どなたかご教授頂けると嬉しいです！
HTMLはこちら
<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>
</div>
</div>
</div>
</div>
</div>
<div id="overLay">
</div>
Javascriptはこちら
<script>
// ここに処理を書いていきます。
let tuikaTimes = 0;
let result = document.getElementById("result");
let tuikaBtn = document.getElementById("tuikaBtn");
let formArea = document.getElementById("form-area");
let table = document.createElement("table");
let tbody = document.createElement("tbody");
let tr = document.createElement("tr");
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let td3 = document.createElement("td");
let deleteBtn =document.createElement("input")
deleteBtn.type = 'button';
deleteBtn.value ='削除';
td1.textContent="名前";
td2.textContent="ニックネーム";
td3.appendChild(deleteBtn);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);
table.appendChild(tbody);
formArea.appendChild(table);
//追加ボタン押したら
tuikaBtn.addEventListener('click',function(){
const namae = document.getElementById("namae");
const nickname = document.getElementById("nickname");
const result = document.getElementById("result");
if(namae=="" || nickname==""){
alert("空です");
}else{
//入力されていたら
if(!window.confirm(namae.value+"さん"+nickname.value+"を登録します。よろしいですか？")){
return false;}
//登録してよいか確認 OKの場合
else{
//tuikaTimesを1つずつ増やす記述
tuikaTimes++;
//登録しましたよとアラートして関数adtrを実行
alert(namae.value+'さん'+nickname.value+'にて登録しました');
adtr(namae.value,nickname.value,deleteBtn);
}}
//3回以上おせなくするかくす
if(tuikaTimes >= 3){
tuikaBtn.style.visibility="hidden";
}
//閉じ
})
//functionadtrのなかみ
function adtr(aa,bb,cc){
const deleteBtn =document.createElement("input");
deleteBtn.type = 'button';
deleteBtn.value ='削除';
const newRow = table.insertRow();
const newCell = newRow.insertCell();
const newText = document.createTextNode(aa);
newCell.appendChild(newText);
newCell2 =newRow.insertCell();
newText2 = document.createTextNode(bb);
newCell2.appendChild(newText2);
const newCell3 = newRow.insertCell();
newText3 = deleteBtn;
newCell3.appendChild(newText3);
}
//削除ボタン！！！
deleteBtn.addEventListener('click',()=>{
const table = document.querySelector("table");
const tbody = document.querySelector("tbody");
const tr = document.querySelector("tr");
table.tbody[0].deleteRow(-1);
tuikaTimes--;
})
//ボタンを元に戻す
if(tuikaTimes < 3){
tuikaBtn.style.visibility="visable";
}
</script>
0
