如何在页面加载时生成随机数？

Question

如何在页面加载时生成随机数？

4

我正在尝试在页面加载时生成一个随机数，但出于某些原因似乎无法工作。随机数每次用户按下提交按钮时都会继续生成，而不仅仅是从页面加载开始生成一次。

我的HTML代码：

<!DOCTYPE html>
 <html>
  <head>
   <title> How many fingers </title>
   <script type="text/javascript" src="main.js"> </script>
 </head>

  <body>
   <h1> Test your luck </h1>
   <h2> How many fingers do I have?<h2>
   <input type="text" id="myGuess">
   <button id="button" onclick="check()"> submit </button>
</body>
</html>

我的JavaScript：

function loadNumber(){
   var myNumber = (Math.floor(Math.random()*10) +1);
 }
 //am not sure if the above function should generate the random number!
 window.onload = loadNumber;

function check(){

  var numberOfGuesses = (Math.floor(Math.random()*9)+1);
  var guess = document.getElementById("myGuess").value;
  var number = (Math.floor(Math.random()*10) +1);

  if(guess==number){
      alert("correct, it took you " + numberOfGuesses + " guesses to get it 
       right")
      document.location.reload();
   }else{
    numberOfGuesses++;
    alert("nope, try again!")
  }
}

- O.Bebars

你怎么知道它不起作用？你在loadNumber()函数里面加了console.log吗？ - Santhosh Kumar

我的意思是...你的代码读取以生成一个数字，每次调用函数时... - Niet the Dark Absol

2

是的，它会在页面加载时创建一个新的随机数，但它仅将其存储在本地变量myNumber中，该变量随后被处理。另一方面，check函数在每次调用时创建一个新的随机number，实际上在逻辑中使用。 - Bergi

是的，你说得完全正确，这是一个作用域问题，onload事件只在函数作用域内发生。我将myNumber作为全局变量与numberOfGuesses变量一起添加，然后它就可以工作了。谢谢Bergi！ - O.Bebars

6个回答

2

在第14行，document.location.reload();表示重新加载页面并调用随机数函数，因此生成一个新的数字。"Original Answer"翻译成"最初的回答"。

- Constantin Chirila

1

只有当用户猜对数字时，他才会执行该操作。他遇到的问题是，每次用户猜测时都会生成一个新的随机数。 - Barmar

没错，Barmar。我刚才调整了myNumber变量的作用域，将其设置为全局变量，这样onload事件就不再只在loadNumber()函数范围内发生了，现在它可以正常运行了。 - O.Bebars

0

感谢大家的支持。以下是我的最终工作代码：

我的Javascript：

var myNumber;
var numberOfGuesses = 1;

function loadNumber(){
  myNumber = (Math.floor(Math.random()*10) +1);
}

window.onload = loadNumber;

function check(){
  var guess = document.getElementById("myGuess").value;

  if(guess==myNumber){
     alert("correct, it took you " + numberOfGuesses + " guesses to get it 
      right")
     document.location.reload();
   } else {
     numberOfGuesses++;
     alert("nope, try again!")
   }

 }

我的HTML：

 <!DOCTYPE html>
<html>
 <head>
   <title> Guess Game </title>
   <script type="text/javascript" src="main.js"> </script>
 </head>

 <body>
    <h1> Test your luck </h1>
    <h2> How many fingers Am I holding up?<h2>
    <input type="text" id="myGuess">
    <button id="button" onclick="check()"> submit </button>
  </body>
</html>

- O.Bebars

0

将var myNumber = 0, numberOfGuesses = 0;放在两个函数外面，这样它就是一个全局变量，可以在两个函数中访问。

在check()函数内部，您可以通过添加numberOfGuesses++;来增加猜测次数，并与全局变量myNumber进行比较，而不是与number进行比较。

- Alien426

0

随机数一直在变化，因为每次按钮点击都会生成一个新的随机数。而且，在loadNumber()中生成的myNumber变量在函数范围之外不可用，并且没有在按钮的onClick函数中使用。

在下面的代码片段中，我将myNumber的声明移出函数，以便两个函数都可以访问它，并构建了猜测计数器（起始值为0）。

var myNumber;
var numberOfGuesses = 0;

function loadNumber() {
   myNumber = Math.floor(Math.random() * 10) + 1;
}

function check() {
    numberOfGuesses++;
    var guess = document.getElementById("myGuess").value;
    if (guess == myNumber) {
        alert("correct, it took you " + numberOfGuesses + " guesses to get it right");
        document.location.reload();
    } else {
        alert("nope, try again!");
    }
}

loadNumber();

<!DOCTYPE html>
<html>
<head>
    <title>How many fingers</title>
    <script type="text/javascript" src="main.js"> </script>
</head>

<body>
    <h1>Test your luck</h1>
    <h2>How many fingers do I have?<h2>
    <input type="text" id="myGuess">
    <button id="button" onclick="check()">submit</button>
</body>
</html>

- Daniel Kütt

我做了与你上面的代码相同的事情，除了两个元素：1- 我将numberOfGuesses变量设置为1而不是0，因为用户至少需要一次尝试来运行代码，2- 在else条件中添加了numberOfGuesses++，所以它从用户猜错时开始计数，现在它完美地工作了。非常感谢Daniel！ - O.Bebars

很高兴能在 Stack Overflow 上帮上忙！如果您能接受这个答案，我会非常开心。 - Wiplash

0

 var numberOfGuesses = (Math.floor(Math.random()*9)+1);
 var guess = document.getElementById("myGuess").value;
 var number = (Math.floor(Math.random()*10) +1);

 function check() {

  if(guess==number){
      alert("correct, it took you " + numberOfGuesses + " guesses to get it right")
   }else{
    numberOfGuesses++;
    alert("nope, try again!")
  }

}

- ymz

2

不要只是贴代码。请解释出了什么问题以及你是如何修复它的。 - Barmar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wiplash · Accepted Answer

我真的对你的代码感到非常困惑。因此，我重构了它，将myNumber和numberOfGuesses从函数中提取出来，以扩大其范围。在页面加载时，loadNumber()会生成随机数，并将其存储在根作用域中。然后check函数可以访问该变量并增加猜测次数。

var myNumber;
var numberOfGuesses = 0;

function loadNumber(){
   myNumber = (Math.floor(Math.random()*10) +1);
}

function check(){
  numberOfGuesses++;

  var guess = document.getElementById("myGuess").value;

  if(guess==myNumber){
      alert("correct, it took you " + numberOfGuesses + " guesses to get it 
       right")
      document.location.reload();
   } else {
    alert("nope, try again!")
  }

}

window.onload = loadNumber;