javascript - 基本 javascript - insertAdjacentHTML

Question

我是 JavaScript 的新学习者，我正在遵循在线指南。基本上我正在创建一个非常简单的待办事项列表。我尝试按照指南进行操作，但似乎我做错了什么。它不会在网页上添加待办事项。

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”