Question

我是编码的新手，刚开始学习javascript，我想尝试写一个简单的游戏来测试我的技能。我显然很少，因为基本游戏的代码不起作用。

在这个游戏中，提示用户通过点击按钮生成一个随机数，一旦他们点击按钮，他们就可以输入他们的猜测并提交。一旦他们提交了猜测，他们就可以点击最后一个按钮来查看他们的猜测是否正确。

不幸的是，当我尝试运行代码时，它会跳过if else语句，无论我插入什么，我都无法弄清楚原因。我非常感谢你的帮助。请不要只给我一个更好的代码，我知道有很多简单的方法可以写出来。但是能够在像这样的简单程序上发现和排除错误可能会帮助我在将来发现我自己的代码中的错误。

感谢!!!

这是代码....不要取笑我，我是新手。

<!DOCTYPE html>
 <html>

 <body>

<button onclick="genNum()"> Random Number </button>
<p id="demo"></p>

<form id="form1">
 Guess: <input name="userGuess" type="number" size="20">
</form>

<button onclick="outputnum()"> Submit </button> 

<button onclick="guessNum()"> Run Guess Num Function </button>

</body>

 var ranNum;

function genNum() {
    var ranNum = Math.floor(Math.random() * 101);
    document.getElementById("demo").innerHTML =
    ranNum;
}

function outputnum() {
x = document.getElementById("form1");
userguess = x.elements["userGuess"].value;
}


function guessNum() {
    if (ranNum == userguess) {
        alert("You are 70"); 
    } else if (ranNum < userguess) {
        alert("Less than 70");
    } else {
        alert("More than 70");
    }
}




 </script>

</html>

Answer 1

当您使用var ranNum声明变量时，这会使其成为包含声明的函数的本地变量。所以genNum分配给局部变量，而guessNum正在查看全局变量。

从var中的作业中删除genNum关键字。

Answer 2

它的速度

欢迎使用Stack Overflow Duckling70。此外，欢迎使用JavaScript！

请在JSfiddle处查看代码的工作示例。

范围内的短课程

JavaScript变量声明很有趣，因为它是动态的并且是悬挂的。让我向您展示一个示例，以显示函数“闭包”和范围如何相互影响：

var num = 3;

function printThree() {
    return num
}

printThree() // returns 3 bc it can access the num variable set on "global scope" 
console.log(num) // returns 3 from global scope

function printFive() {
    var num = 5; // this variable exists only within this function
    return num;
}

printFive() // returns 5 because it references num from the scope of the function
console.log(num) // returns 3 because it does not have access to the scope within the function

完整的HTML解决方案

最后，这是您的问题的总结性解决方案代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<h1>Steps</h1>
  <ol>
    <li>Click Random Number.</li>
    <li>Enter your guess then click Submit.</li>
    <li>Click Run Guess Num Function to see how close you got!</li>
  </ol>
  <button onclick="genNum()">Random Number</button>
  <p id="demo"></p>
  <form id="form1">
     Guess:<input name="userGuess" type="number" size="20">
  </form>
  <button onclick="setOutputNum()">Submit</button>
  <button onclick="compareGuessToNum()">Run Guess Num Function</button>
</body>
<script>
  var ranNum;
  var userGuess;

  function genNum() {
      ranNum = Math.floor(Math.random() * 101);
      document.getElementById("demo").innerHTML = ranNum;
  }

  function setOutputNum() {
      var x = document.getElementById("form1");
      userGuess = x.elements["userGuess"].value;
      // Set userGuess to number instead of string
      userGuess = +userGuess
  }

  function compareGuessToNum() {
      if (ranNum === userGuess) {
          alert("You are 70");
      } else if (ranNum < userGuess) {
          alert("Less than 70");
      } else {
          alert("More than 70");
      }
  }
</script>
</html>

进一步阅读

Eloquent JavaScript对范围有很好的解释。

用于挑选随机数游戏的Javascript代码无效

2 个答案:

它的速度

范围内的短课程

完整的HTML解决方案

进一步阅读