基本的 javascript-insertAdjacentHTML

Question

我是 JavaScript 的新學習者，我正在關注在線指南。 基本上我正在創建一個非常簡單的待辦事項列表。 我試圖按照指南進行操作，但似乎我做錯了什么。 它不會在 web 頁面上添加待辦事項。

 let ourForm = document.getElementById("ourForm"); let ourField = document.getElementById("ourField"); let ourList = document.getElementById("ourList"); ourForm.addEventListener("submit", e => { e.preventDefault(); addItem(ourfield.value); }); function addItem(x) { let ouritem = `<li>${x}<button>delete</button></li>`; ourList.insertAdjacentHTML("beforeend", ouritem); }

 <h1>TO-DO app</h1> <form id="ourForm"> <input id="ourField" type="text" autocomplete="off" /> <button>add item</button> </form> <ul id="ourList"> <li>hello<button>delete</button></li> </ul>

Answer 1

第 26 行你有一個錯字：

ourForm.addEventListener("submit", e => {
        e.preventDefault();
HERE => addItem(ourfield.value);
});

您的變量稱為“ourField”而不是“ourfield”

Answer 2

您的表單提交偵聽器中有一個錯字 - 大小寫對計算機很重要，至少是更好的。