javascript - 如何将用户输入存储为 JavaScript 变量以供以后使用

Question

我正在尝试编写一个程序，允许用户键入输入，然后按下按钮并打印输入。我似乎无法让 JavaScript 来保存用户输入。我认为这与文本输入字段的 value 属性没有更新有关，因此 JavaScript 无法检索它。我不知道如何解决这个问题，因此无法看出这是否是导致问题的原因。任何帮助将不胜感激。

var n = document.getElementById('userInput').value;

function runCode() {
  document.getElementById('test').innerHTML = n;
}

<input type="text" id="userInput">
<button type=button id="btn" onclick="runCode()">Click Me!</button>
<p id="test">Orginal Text</p>

Answer 1

由于您在页面加载时获取该值，因此该值为空，因此您应该在点击处理函数内获取该值。

请注意:如果值是纯字符串(不是 htmlString)而不是 innerHTML，则最好使用 textContent 或 innerText 元素的属性。

<input type="text" id="userInput">
<button type=button id="btn" onclick="runCode()">
  Click Me!
</button>
<p id="test">
  Orginal Text
</p>
<script>
  //console.log(document.getElementById('userInput').value == "") // true
  function runCode() {
    var n = document.getElementById('userInput').value;
    document.getElementById('test').textContent = n;
  }
</script>