Question

我创造了一个猜测数字的游戏。我目前的问题是每次点击猜测按钮时，数字都会刷新！我怎么能阻止这种情况发生？我已经为它做了一段时间的努力，但没有运气，我还是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>

Answer 1

您可以通过Event.preventDefault()停止表单的submit事件来解决此问题：

document.getElementById("sampleform").addEventListener("submit", function(event){
    event.preventDefault();
});

正如mercator所指出的，如果对action属性使用空字符串，它将使用文档的地址，并进一步重新加载脚本。

Answer 2

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

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

＆＃13;

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

＆＃13;

Answer 3

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

<强>第一：

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

您尚未指定按钮的类型（“提交”，“按钮”或“重置”）。默认情况下（取决于浏览器），类型将设置为“submit”，将当前表单发布到“action”属性中设置的url，从而重新计算隐藏号码。顺便说一句，如果您在javascript代码中按ID选择它，则无需为按钮设置名称。

因此，设置type =“按钮”使您有机会设置按钮的行为而不会触发任何其他事件。

<强>第二：

好了，现在按钮没有提交表格而且号码没有刷新，但是...如果用户输入一个号码然后按Enter键怎么办？表格已张贴。

嗯，你有2种方法可以解决这个问题：你禁用提交事件或者只是不使用表单，因为你通过Javascript完成所有事情。如果您真的想使用表单，则必须考虑“onsubmit”事件。

<强>最后，

我会给你两种解决方法：

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

2）不使用表单并使用虚拟按钮：http://jsfiddle.net/019xL737/1/

希望它有所帮助！祝你好运！

如何在表单提交时刷新随机生成的数字？

3 个答案: