javascript - Javascript 如何通过 document.getElementById 与 HTML 交互？

Question

我希望我没有问一个以前已经回答过的问题 - 我无法找到任何与此主题相关的具体内容。

我的任务是通过 JavaScript 创建一个“Hangman”游戏。我的教授给了我们游戏的 HTML 标记，并使用 CSS 设计了它的样式。我必须编写 Javascript 才能使游戏运行。该代码包含在外部文件中。

HTML 有一个接受 Hangman 首字母的表单:

<div id="enterWordContainer" align="center">
Enter a six letter word for hangman:  <input id="hangManWord" type="text" value="" />
<input type="button" value="Submit" onclick="saveWord();"/> </div>

如何开始操作要在 HTML 文档中输入的文本？

我尝试创建一个包含文本的变量:

var userGuess = document.getElementById("hangManWord").value;

这不应该将表单的输入放入 Javascript 变量中吗？

Answer 1

当页面加载后(或加载时)执行时，赋值 userGuess = document.getElementById("hangManWord").value 将变量 userGuess 设置为空字符串，因为这就是由于 HTML 属性 value="" 而设置的 value 属性。

当用户使用input控件更改值时，这不会更改userGuess值的值。

在saveWord函数中，您可以使用document.getElementById("hangManWord").value来获取控件的当前值。不过，在输入值之前，您无法获取该值。如果您愿意，您可以使用例如var userGuess = document.getElementById("hangManWord")，创建对 input 元素的引用(对整个元素节点对象的引用，而不是仅仅获取当前值其中一个属性)，然后稍后使用 userGuess.value。