Question

我正在网上关于如何制作待办事项列表的教程，请点击此处：

https://www.youtube.com/watch?v=MURDw0-BiEE

我非常密切地关注它，但它不会起作用。浏览器声明appendChild为空。该教程已有2年历史，部分代码可能已过时吗？我让它通过按钮发送警报，但是当我改为appendChild时，事情就停止了。

我对此很陌生，非常感谢你的帮助。

function addNewItem() {
    var listItem = document.createElement("li");
    listItem.innerText = "Hello";

    list.appendChild(listItem);
}


var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
    addNewItem(document.getElementById("todoList"));
};

以下是HTML的相关部分：

<p><button id="btnAdd">New Item</button></p>

<ul id="todolist">


</ul>

<script src="todo.js"></script>
    </body>

Answer 1

您已经定义了没有参数的函数，然后尝试传递一个：

function addNewItem(list) {}

PS ：您还尝试getElementById todoList而不是todolist，因此它也给了您错误：

addNewItem(document.getElementById("todolist"));

JSFiddle

Answer 2

您正在使用addNewItem(document.getElementById("todoList"))将参数传递给函数addNewItem（），但您没有在函数中声明此参数。因此变量列表变为null并且appendChild（）不起作用。所以改变你的第一行：

function addNewItem() {

到

function addNewItem(list) {

它会起作用。

Answer 3

您错过了功能参数，列表：

function addNewItem(list) {
    var listItem = document.createElement("li");
    listItem.innerText = "Hello";

    list.appendChild(listItem);
}


var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
    addNewItem(document.getElementById("todoList"));
};

appendChild null |的JavaScript / HTML

3 个答案:

JSFiddle