为什么我的 onclick 属性在提交时不运行 function？

Question

每个人。 有点 JS 菜鸟。 第一个问题在这里。 我尝试通过 Stack Overflow 提交指南更加具体，但我不确定如何，因为我不确定这有什么问题。 成为更好的提问者的提示值得赞赏。

我正在构建一个简单的 JS 待办事项列表，尽量不使用视频教程。 我只是无法弄清楚这有什么问题。 在点击“提交”按钮时，控制台日志或实际页面中都没有发生任何事情。 我究竟做错了什么？

 let todoInput = document.getElementById("input"); let list = document.getElementById("submit"); let form = document.getElementById("form"); list.onclick = function addTodo(e) { e.preventDefault(); // todo div const todoDiv = document.createElement('div'); todoDiv.classList.add('todo'); // todo LI const newTodo = document.createElement('li'); newTodo.innerText = todoInput.value; newTodo.classList.add('todo-item'); todoDiv.appendChild(newTodo); if (todoInput.value === "") { return null } };

 <h1>TODO LIST</h1> <form id="form" onload="false"> <input id="input" type="text"> <input id="submit" type="submit" value="Submit"> </form> <div id="output"></div>

Answer 1

那是因为当您创建了todoDiv元素时，您根本没有将它附加到您的 DOM 中。 如果要将 append 它添加到#output元素，可以在最后添加以下行：

document.getElementById('output').appendChild(todoDiv);

注意：您的li元素必须附加到<ul>元素。 您可以将#output更改为<ul>元素，并将 append 您的列表项直接更改为它：

请参阅下面的概念验证：

 let todoInput = document.getElementById("input"); let list = document.getElementById("submit"); let form = document.getElementById("form"); let output = document.getElementById("output"); list.onclick = function addTodo(e) { e.preventDefault(); // todo LI const newTodo = document.createElement('li'); newTodo.innerText = todoInput.value; newTodo.classList.add('todo-item'); output.appendChild(newTodo); };

 <h1>TODO LIST</h1> <form id="form" onload="false"> <input id="input" type="text"> <input id="submit" type="submit" value="Submit"> </form> <ul id="output" class="todo"></ul>