单击按钮时，我正在尝试将输入的内容保存到本地存储中。我究竟做错了什么？

Question

所以我有一个 ID 为“answer”的输入元素和一个按钮。我为按钮添加了一个事件侦听器，并尝试调用一个函数，将输入中的文本保存到本地存储中。控制台告诉我“innerHTML”为空，但我不确定我应该做什么。

<input type="text" id="answer" />
<button id="button">click me</button>





var inputAnswer = document.getElementById("#answer")
var buttonEl = document.getElementById("button")

buttonEl.addEventListener("click", saveToStorage())

function saveToStorage() {
localStorage.setItem("task", inputAnswer.innerHTML);
}

Answer 1

<input type="text" id="answer" />
<button id="button">click me</button>

<script type="text/javascript">
  var inputAnswer = document.getElementById("answer");
  var buttonEl = document.getElementById("button");

  buttonEl.addEventListener("click", addAnswerToLocalStorage);

  function addAnswerToLocalStorage() {
    const value = inputAnswer.value;
    localStorage.setItem("answer", value);
  }
</script>

获取输入字段的引用有错误。而不是 #answer document.getElementById("#answer") 它应该只是 answer only。此外，我在本地机器上检查了它，它工作正常。

Answer 2

getElementById() 需要一个 ID，没有标签。将var inputAnswer = document.getElementById("#answer") 更改为var inputAnswer = document.getElementById("answer")（删除#）。

buttonEl.addEventListener("click", saveToStorage()) 立即调用saveToStorage() 函数，这不是您想要的。相反，将其作为参考传递：buttonEl.addEventListener("click", saveToStorage)。