在 JavaScript 中从 HTML 表单存储和返回输入变量答案

【问题标题】：Storing and returning input variable from HTML form in JavaScript在 JavaScript 中从 HTML 表单存储和返回输入变量
【发布时间】：2014-05-02 15:55:34
【问题描述】：

我一直在阅读其他问题，但我尝试过的建议对我没有用。我试图让用户输入一个数字并以 JS 警报的形式返回（目前）。这是我的代码：

HTML

<form id="form">
Enter your guess: <input id="guessbox" type="text" name="userguess">
<input id="submitbutton" type="submit" value="Submit">
</form>

JavaScript

var guess = document.getElementById("guessbox").value;
alert(guess);

我的输入框的值一直为“null”，我希望在单击提交按钮时将输入的值转换为变量“guess”。我确定我只是在这里遗漏了一些基本的东西。

【问题讨论】：

什么时候调用你的js代码？
在我发布的示例中，我想我没有......但是我尝试使用该 JS 代码编写一个函数，并在提交按钮上使用了 onClick="thefunction()"。除了那个，我真的不知道该用什么，显然我用错了。
你可以使用onsubmit=thefunction()

标签： javascript html

【解决方案1】：

你可以试试：

<form name="form" onSubmit="returnGuess()">
Enter your guess: <input id="guessbox" type="text" name="userguess">
<input id="submitbutton" type="submit" value="Submit">
</form>

Javascript：

function returnGuess(){
    var guess = document.forms["form"]["userguess"].value;
    alert(guess);
}

【讨论】：

太棒了。那解决了它。因此 document.forms.value 方法获取表单名称和表单中的输入名称，并返回所述输入的值。出于好奇，关闭文本输入标签而不关闭提交按钮输入标签有什么意义？
这个答案没有解释为什么原始代码不起作用。 document.getElementById("guessbox") 应该是等价的。
我认为这是我真正缺少的表单中的 onSubmit。我曾尝试在提交按钮上使用 onClick，但没有成功。