我正在尝试在页面加载时生成一个变量，然后我想多次猜测，如何在每次猜测时阻止变量刷新？

Question

我正在做一个简单的数字猜谜游戏。 我希望进行多次尝试，因此我假设onclick函数的随机数生成器已经过时，假设这会使我的数字“粘住”，但是我仍然让随机变量刷新每次尝试。 为什么会这样呢？

<p>Guess a number</p>

<form><input type="text" id="guess"><button id="guessbutton">Guess</button></form>

<script type="text/javascript">

    var numberwang = Math.floor(Math.random() * 6);

    console.log(numberwang);

    document.getElementById("guessbutton").onclick = function() {

        if (document.getElementById("guess").value == numberwang) {

            alert("That's numberwang!")

        } else {

            alert("That's not numberwang, try again")

        }

    }

</script>

使用控制台，我可以看到该数字在每次尝试时都会刷新。 我的印象是，仅将脚本标记内包含代码意味着该数字仅在页面加载时生成。 不是吗？ 提前谢谢了。

Answer 1

您需要停止表单内按钮的默认行为，即提交表单，这将刷新页面。 见下文：

<p>Guess a number</p>

<form><input type="text" id="guess"><button id="guessbutton">Guess</button></form>

<script type="text/javascript">

    var numberwang = Math.floor(Math.random() * 6);

    console.log(numberwang);

    document.getElementById("guessbutton").onclick = function(e) {
        e.preventDefault();
        if (document.getElementById("guess").value == numberwang) {

            alert("That's numberwang!")

        } else {

            alert("That's not numberwang, try again")

        }

    }

</script>

e.preventDefault（）将停止任何dom元素的任何默认行为。 参见此处： https ： //developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault

Answer 2

您可以使用浏览器存储器来存储号码：

storage.setItem(keyName, keyValue);

例：

localStorage.setItem('randomNumber1', getRandomNumber());
localStorage.setItem('randomNumber2', getRandomNumber());
localStorage.setItem('randomNumber3', getRandomNumber());
localStorage.setItem('randomNumber4', getRandomNumber());


function getRandomNumber(){
    return Math.floor(Math.random() * 6);
}

并使用以下数字访问数字：

localStorage.getItem('randomNumber1');
localStorage.getItem('randomNumber2');
localStorage.getItem('randomNumber3');
localStorage.getItem('randomNumber4');

Answer 3

使用evt.preventDefault()应该可以解决问题。 preventDefault()方法将取消事件（如果可取消），这意味着不会发生属于该事件的默认操作。

例如，在以下情况下这可能很有用：

• 点击“提交”按钮，阻止其提交表格
• 单击一个链接，以防止该链接跟随URL。

试试下面的代码。

<p>Guess a number</p>
<form><input type="text" id="guess"><button id="guessbutton">Guess</button></form>
<script type="text/javascript">
    var numberwang = Math.floor(Math.random() * 6);
    console.log(numberwang);
    document.getElementById("guessbutton").onclick = function(evt) {
        evt.preventDefault();
        if (document.getElementById("guess").value == numberwang) {
            alert("That's numberwang!")
        } else {
            alert("That's not numberwang, try again")
        }
    }
</script>