LoginSignup
demilio
@demilio

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

エラーの表示文

解決したいこと

ある動画コンテンツのスケジュールアプリを作っています。
動画と見比べながら作成しているのですが、自分のだけエラーが表示されています。
何度も確認していますが分からないのでそれを解決したいです。

発生している問題・エラー

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

3Answer

appendChildが正しい記述ですね。テキストエディタにVSCodeなどを使用してJavaScriptの拡張機能をインストールすると、記述間違いが事前にわかると思います。

1Like

そうなのですね。
すみません、記述ミスでした。
ありがとうございました。

0Like

Your answer might help someone💌