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

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

javascript html css

Javascript 如何在页面加载时生成随机数？,javascript,html,css,Javascript,Html,Css,我试图在页面加载时生成一个随机数，但由于某些原因它似乎不起作用。每次用户按下submit按钮时都会生成随机数，而不是从页面加载开始时才生成一次我的HTML： <!DOCTYPE html> <html> <head> <title> Guess Game </title> <script type="text/javascript" src="main.js"> </script> </

我试图在页面加载时生成一个随机数，但由于某些原因它似乎不起作用。每次用户按下submit按钮时都会生成随机数，而不是从页面加载开始时才生成一次

我的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>


多少个手指
考验你的运气
我有多少根手指？
提交

我的JavaScript：

函数loadNumber（）{
var myNumber=（Math.floor（Math.random（）*10）+1）；
}
//我不确定上述函数是否应该生成随机数！
window.onload=加载编号；
函数检查（）{
var numberOfGuesses=（Math.floor（Math.random（）*9）+1）；
var guess=document.getElementById（“myGuess”）.value；
var number=（Math.floor（Math.random（）*10）+1）；
如果（猜测==数字）{
警惕（“正确，你用了”+numberOfGuesses+“猜测”得到它
对)"
document.location.reload（）；
}否则{
numberOfGuesses++；
警报（“不，再试一次！”）
}
}
第14行document.location.reload（）上的重新加载页面并调用随机数函数，从而重新生成一个新数字
 我真的被你的代码弄糊涂了。所以我对它进行了重组，将myNumber和numberOfGuesses带到函数之外，以扩大范围。在页面加载时，它在loadNumber（）中生成随机数，该随机数位于此处的根范围内。然后检查是否可以访问该信息并猜测是否有罪
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;

Putvar myNumber=0，numberOfGuesses=0在两个函数之外，因此它是一个全局变量，可以在两个函数中访问
Inside check（）您可以通过放入numberOfGuesses++来增加猜测次数并与全局变量myNumber
进行比较，而不是number
随机数正在更改，因为每次单击按钮都会生成一个新的随机数。另外，在loadNumber（）中生成的myNumber变量在函数的作用域之外不可用，并且在按钮的onClick函数中未使用
在下面的代码段中，我将myNumber的声明传输到函数外部，以便两个函数都可以访问它，并且还构造了猜测计数器（起始值为0）

var-myNumber；
var numberOfGuesses=0；
函数loadNumber（）{
myNumber=Math.floor（Math.random（）*10）+1；
}
函数检查（）{
numberOfGuesses++；
var guess=document.getElementById（“myGuess”）.value；
如果（猜测==myNumber）{
警惕（“正确，你用了”+numberOfGuesses+“猜测”才正确”）；
document.location.reload（）；
}否则{
警告（“不，再试一次！”）；
}
}
loadNumber（）

多少个手指
考验你的运气
我有多少根手指？
提交
感谢大家的大力支持。以下是我的最终工作代码：
我的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>


猜谜游戏
考验你的运气
我能举起多少根手指？
提交
您如何判断它不起作用？你是否在loadNumber（）函数中添加了console.log我的意思是。。。每次调用函数时，您的代码都会读取以生成一个数字……是的，它确实会在页面加载时创建一个新的随机数，但它只将其存储在局部变量myNumber
中，随后将其释放。另一方面，check
函数在每次调用时都会创建一个新的随机number
，这实际上是在逻辑中使用的。是的，你完全正确，这是一个范围问题，onload事件只发生在函数范围内。我将myNumber作为全局变量与numberOfGuesses变量一起添加，结果成功了。谢谢你，伯吉！只有当用户猜到正确的数字时，他才会这样做。他遇到的问题是，每次用户猜测时都会生成一个新的随机数。这是正确的Barmar。我刚刚扭曲了myNumber变量的作用域，使其成为一个全局变量，这样onload事件就不会只发生在loadNumber（）函数作用域中，现在它可以工作了。不要只是发布代码。解释什么地方出了问题，以及你是如何解决的。非常感谢。除了两个元素外，我与上面的代码做了相同的操作：1-numberOfGuesses变量我使其等于1，而不是0，因为用户将至少尝试运行一次代码；2-numberOfGuesses++被添加到else条件中，因此当用户出错时，它开始计数，现在它工作正常。非常感谢！不要只是张贴代码。解释出了什么问题以及您是如何修复的。除了两个元素外，我与您上面的代码做了相同的操作：1-numberOfGuesses变量我使其等于1而不是0，因为用户将至少尝试运行一次代码；2-numberOfGuesses++添加到else条件中，以便在用户出错时开始计数，现在它工作得很好。非常感谢丹尼尔！非常高兴能够帮助您解决堆栈溢出问题！如果你能接受这个答案，我会非常高兴的