Question

我正在尝试创建我的页面，以便当我输入一个数字并单击“提交”时，就会出现“你猜对了数字”之类的内容。它做到了这一点，但只是在消失前一瞬间。我希望它能保持到我再次点击提交按钮为止。究竟是什么问题？

相关JS

function returnGuess() {
    var guess = document.forms["form"]["guessbox"].value;
    document.getElementById("yourguess").innerHTML = "You guessed " + guess;
}

基本上我只是想知道如何让更新的文本留在那里。

Answer 1

问题是您的页面正在重新加载，因为您单击提交时表单会将数据发送到服务器。

您需要从javascript取消表单提交。另一个问题有关于这样做的更多讨论：How do I cancel form submission in submit button onclick event?

我会尝试将您的<form>标记更改为：

<form id="form" onsubmit="return returnGuess()">

然后将return false;添加到javascript方法的末尾。

Answer 2

问题是您正在使用提交按钮，因此该页面将发布到您的服务器，然后重新呈现。如果你想向他们展示他们输入的数字并提交表格，你将需要在处理提交服务器端时将其写入你的html输出

Answer 3

returnGuess是您对表单的onsubmit操作。因此，当您单击“提交”按钮时，代码将运行，然后表单将发布回服务器。它看起来像页面回发自己并返回新页面，因此你的猜测就会丢失。

我甚至不会使用带有提交按钮的表单标签。如果您不回帖，只需使用常规按钮：

Enter your guess: <input id="guessbox" type="text" name="userguess">
<input id="submitbutton" type="button" value="Submit" onclick="returnGuess();">


<p id="yourguess"></p>

并保持脚本相同，但如果您不想更改html，我会使用innerText代替innerHTML。

function returnGuess() {
    var guess = document.forms["form"]["guessbox"].value;
    document.getElementById("yourguess").innerHTML = "You guessed " + guess;
}

使用innerHTML写入页面但它很快消失

3 个答案: