如何停止随机生成的数字从刷新表单提交

How to stop randomly generated number from refreshing on form submit?

本文关键字：数字 刷新 表单提交 何停止 随机      更新时间：2023-09-26

我创造了一个猜测数字的游戏。我目前的问题是，每次我点击猜测按钮，数字刷新自己!我怎样才能阻止这一切的发生?我已经努力了一段时间了，但没有运气，我仍然是javascript的新手。如果你能解释一下我做错了什么，我将非常感激，因为目前我不明白为什么会这样。

<form id='sampleform' method='get' action=''>
Guess: <input type='text' name='guess' id = 'guess'/>
<button id ='b1' name='Submit' value='Submit'/>
</form>

<script>
document.getElementById("b1").addEventListener("click", checkForm);
x = Math.floor(Math.random()*99)
function randomNumber(){
    return x;
}

function checkForm(){
var number = document.getElementById('guess').value; 
if (number == null || number == "" || isNaN(number) || number < 0 || number > 99){
    alert("Invalid input");
    return false;
}
else if (number == x)
{
    alert("You're correct!");
    document.getElementById('b1').disabled = true;
    return true;
}
else{
    alert("Wrong! Try again.")
    }
}
randomNumber();
console.log(x); //checks value for testing
</script>

您可以通过使用Event.preventDefault():

停止表单的submit事件来解决此问题
document.getElementById("sampleform").addEventListener("submit", function(event){
    event.preventDefault();
});

正如墨卡托所指出的，如果你为你的action属性使用一个空字符串，它将使用文档的地址，并在进一步的后果中重新加载你的脚本。

假设您想将表单提交给服务器。

您可以生成一个值并将其存储在浏览器的localStorage中，如果该值已经定义，则使用该值。

if (localStorage['random-number']) {
  x = parseInt(localStorage['random-number']);
} else {
  x = Math.floor(Math.random() * 99);
  localStorage['random-number'] = x;
}

嗯，我在这里看到不同的东西，所以我会尽可能清楚地解释每一点。

首先

: 

<button id ='b1' name='Submit' value='Submit'/>

你没有为按钮指定类型("submit"， "button"或"reset")。默认情况下(取决于浏览器)，该类型将被设置为"提交"，它将当前表单发送到"action"属性中设置的url，因此需要重新计算隐藏数。顺便说一下，如果你在javascript代码中通过id选择按钮，你不需要为按钮设置名称。

因此，设置type="button"使您有机会在不触发任何其他事件的情况下设置按钮的行为。

第二:

Ok，现在按钮没有提交表单，号码也没有刷新，但是…如果用户输入一个数字并按回车键呢?表格已张贴。

好吧，你有两种方法来解决这个问题:你禁用提交事件或不使用表单，因为你做的一切都通过Javascript。如果你真的想使用表单，你必须考虑"onsubmit"事件。

最后,

我给你两种方法来解决这个问题:

1)使用表单处理onsubmit事件:http://jsfiddle.net/q620qaun/

2)不使用表单，使用虚拟按钮:http://jsfiddle.net/019xL737/1/

希望有帮助!好运！

相关文章：