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>

Answer 2

您正在JS执行开始时引用输入的值，该输入的值将为空字符串。

尝试放入 var n = document.getElementById('userInput').value;在函数内部

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

2 个答案: