為什么我的 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>