javascript ボタンを非表示にしたい
javascriptを学習しています。
3回目以降は追記できないようにしましたが、ボタンを非表示に出来ておりません。
どなたかご教授お願いいたします。
<!DOCTYPE html>
<html>
<head>
<title>アカウント登録</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</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>
<table id="result-table">
<thead>
<tr>
<th>名前</th>
<th>ニックネーム</th>
<th>削除</th>
</tr>
</thead>
</table>
</form>
<div id="tuikaMoto">
</div>
<div id="result"></div>
</div>
</div>
</div>
</div>
</div>
<div id="overLay">
</div>
<script>
class NameTable {
constructor() {
this.data = [];
this.table = document.getElementById('result-table');
this.tbody = this.table.createTBody();
this.btn = document.getElementById("tuikaBtn");
this.input_namae = document.getElementById("namae");
this.input_nickname = document.getElementById("nickname");
}
handleEvent(e) {
if (e.target === this.btn) {
const name_value = this.input_namae.value,
nickname_value = this.input_nickname.value;
if (this.checkTsuika(name_value, nickname_value)) {
this.pushData(name_value, nickname_value);
this.createTable();
};
} else if (e.target.matches('.del')) {
this.clickDel(e.target);
}
}
pushData(name, nickname) {
/* DBなどに追加する場合は、ここでfetchなどで通信 */
this.data.push({ name: name, nickname: nickname });
window.alert(`「[${name}]さん[${nickname}]にて登録しました。」`);
this.input_namae.value = '';
this.input_nickname.value = '';
if (this.data.length > 2) {
Object.assign(this.btn, {
value: '',
disabled: true,
});
}
}
createTable() {
while (this.tbody.firstChild) {
this.tbody.removeChild(this.tbody.firstChild);
}
this.data.forEach(d => {
const tr = this.tbody.insertRow(-1);
tr.insertCell(0).appendChild(document.createTextNode(d.name));
tr.insertCell(1).appendChild(document.createTextNode(d.nickname));
const input_del = document.createElement('input');
Object.assign(input_del, {
type: 'button',
value: '削除',
className: 'del',
});
tr.insertCell(2).appendChild(input_del);
});
}
checkTsuika(name, nickname) {
if (name === "" || nickname === "") {
return false;
}
return window.confirm(`「[${name}]さん[${nickname}]を登録します。よろしいですか？」`);
}
clickDel(target) {
/* fetchなどで削除を送信 */
const dels = [...this.tbody.querySelectorAll('.del')];
this.data = this.data.filter((_, i) => dels[i] !== target);
this.createTable();
Object.assign(this.btn, {
value: '追加ボタン',
disabled: false,
});
}
}
// 実行
window.addEventListener('DOMContentLoaded', () => {
const table = new NameTable();
document.addEventListener('click', table, false);
});
</script>
</body>
</html>
