エラーの表示文
Q&A
解決したいこと
ある動画コンテンツのスケジュールアプリを作っています。
動画と見比べながら作成しているのですが、自分のだけエラーが表示されています。
何度も確認していますが分からないのでそれを解決したいです。
発生している問題・エラー
index.html:39 Uncaught TypeError: newRow.appendClild is not a function
at HTMLInputElement.addClick
newRow.appendClild(dateTd);
newRow.appendClild(contentTd);
newRow.appendClild(removeTd);
の事だと思いますが、何が間違っているのか分かりませんでした。
よろしくお願いいたします。
該当するソースコード
<h1>学習表</h1>
<div>
<input type="date" id="add_date">
<input type="text" id="add_text">
<input type="button" id="add_button" value="add">
</div>
<table class="table">
<thead>
<tr>
<th class="col">日付</th>
<th class="col-8">内容</th>
<th class="col">削除</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
該当するソースコード
const removeClick = () => {
event.currentTarget.parentNode.parentNode.remove();
}
const addClick = () => {
if (document.getElementById("add_date").value != "") {
alert("日付が設定されていません");
return;
}
if (document.getElementById("add_text").value != "") {
alert("内容が設定されていません");
return;
}
var newRow = document.createElement("tr");
var dateTd = document.createElement("td");
var contentTd = document.createElement("td");
var removeTd = document.createElement("td");
var removeButton = document.createElement("input");
removeButton.setAttribute("type", "button");
removeButton.value = "remove";
removeButton.onclick = removeClick;
//Tdの中身
dateTd.innerText = document.getElementById("add_date").value;
contentTd.innerText = document.getElementById("add_text").value;
removeTd.appendChild(removeButton);
newRow.appendClild(dateTd);
newRow.appendClild(contentTd);
newRow.appendClild(removeTd);
document.getElementById("table_body").appendChild(newRow);
}
window.onload = () => {
document.getElementById("add_button").onclick = addClick;
}
0
