如何在猜数字游戏中使猜函数起作用？

时间：2019-10-08 00:56:07

标签： javascript html css function

我正在用HTML，CSS和javascript猜数字游戏。我似乎无法弄清楚我的JavaScript在做什么错。我已经尝试了多种方法来使其工作，但我无法弄清楚。我现在正在使用的唯一按钮是简易游戏模式。其中一些功能可以使用，但是猜测按钮将无法使用。这是我的代码：

function easy() {
  var easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyDiv').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}
* {
  margin: 0px;
}

#guess {
  padding: 5px;
  border-color: #c3c3c3;
  background: #c3c3c3;
}

input {
  border: 0.5px solid #000000;
  border-radius: 5px;
  outline: none;
  background: #d4d4d4;
}

button {
  border: solid;
  border-color: #000000;
  border-radius: 7.5px;
  padding: 7.5px;
  outline: none;
  cursor: pointer;
}

#easy {
  background: #00ff00;
}

#medium {
  background: #ffff00;
}

#hard {
  background: #ff6600;
}

#insane {
  background: #ff0000;
}

#menu {
  border-radius: 10px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 25px;
  background: #ffffff;
  opacity: 0.9;
  font-family: arial;
}

#header {
  background-color: #ffffff;
  opacity: 0.7;
  width: 100%;
  height: 120px;
  position: relative;
}

#title {
  font-family: arial;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

body {
  background: radial-gradient(#aaaaff, #00003b) no-repeat center center;
  background-size: 100% 100%;
}
<html>
<head>
  <title>Guess the Number</title>
</head>
<body>
  <div id="header">
    <h1 id="title">Guess the Number</h1>
  </div>
  <div id="menu">
    <u><h2>Level Select</h2></u>
    <br>
    <button id="easy" onclick="easy()"><b>Easy</b></button>
    <button id="medium" onclick="medium()"><b>Medium</b></button>
    <button id="hard" onclick="hard()"><b>Hard</b></button>
    <button id="insane" onclick="insane()"><b>Insane</b></button>
  </div>
</body>
</html>

希望您能对此有所帮助。谢谢！ （我只需要JavaScript方面的帮助）

5 个答案:

答案 0 :(得分：1)

easyNum仅存在于创建它的功能块中。您需要将其设为全局变量，以便guessEasy()可以访问它，或将其作为参数传递给{{1 }}就像这样：

guessEasy()

对于其他难度级别，则取决于您实现功能"<div ... onclick='guessEasy(" + easyNum + ")' ...></div>" ，medium()和hard()来使游戏的其余部分正常工作。

insane()
function easy() {
  var easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy("+easyNum +")'>Guess!</button></div>";
}

function guessEasy(easyNum) {
  if (document.getElementById('easyGuess').value == easyNum) { // change to 'easyGuess'
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was " + easyNum + ".</h2>";
  }
}
* {
  margin: 0px;
}

#guess {
  padding: 5px;
  border-color: #c3c3c3;
  background: #c3c3c3;
}

input {
  border: 0.5px solid #000000;
  border-radius: 5px;
  outline: none;
  background: #d4d4d4;
}

button {
  border: solid;
  border-color: #000000;
  border-radius: 7.5px;
  padding: 7.5px;
  outline: none;
  cursor: pointer;
}

#easy {
  background: #00ff00;
}

#medium {
  background: #ffff00;
}

#hard {
  background: #ff6600;
}

#insane {
  background: #ff0000;
}

#menu {
  border-radius: 10px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 25px;
  background: #ffffff;
  opacity: 0.9;
  font-family: arial;
}

#header {
  background-color: #ffffff;
  opacity: 0.7;
  width: 100%;
  height: 120px;
  position: relative;
}

#title {
  font-family: arial;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

body {
  background: radial-gradient(#aaaaff, #00003b) no-repeat center center;
  background-size: 100% 100%;
}

答案 1 :(得分：1)

错误1：您将easyNum声明为easy（）的本地变量。

错误2：您正在尝试使用div的值（easyDiv）。 

var easyNum; //change 1

function easy() {
  easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyGuess').value == easyNum) { //change 2
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}

答案 2 :(得分：0)

您需要将|user| new-col | count| | ------- | ------- | | 1 | 3 | 2 | | 1 | 7 | 1 | | 1 | 11 | 2 | | 1 | 25 | 2 | | 1 | 44 |2 | | 1 | 56 |1 | | 1 | 77 | 1 | | 1 | 32 | 2 | 放在函数之外，以便可以在全局范围内使用。

var easyNum;

答案 3 :(得分：0)

您需要在函数外部声明“ easyNum”变量。像这样：

var easyNum;
function easy() {
  easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyDiv').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}
* {
  margin: 0px;
}

#guess {
  padding: 5px;
  border-color: #c3c3c3;
  background: #c3c3c3;
}

input {
  border: 0.5px solid #000000;
  border-radius: 5px;
  outline: none;
  background: #d4d4d4;
}

button {
  border: solid;
  border-color: #000000;
  border-radius: 7.5px;
  padding: 7.5px;
  outline: none;
  cursor: pointer;
}

#easy {
  background: #00ff00;
}

#medium {
  background: #ffff00;
}

#hard {
  background: #ff6600;
}

#insane {
  background: #ff0000;
}

#menu {
  border-radius: 10px;
  text-align: center;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 25px;
  background: #ffffff;
  opacity: 0.9;
  font-family: arial;
}

#header {
  background-color: #ffffff;
  opacity: 0.7;
  width: 100%;
  height: 120px;
  position: relative;
}

#title {
  font-family: arial;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

body {
  background: radial-gradient(#aaaaff, #00003b) no-repeat center center;
  background-size: 100% 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>
<head>
  <title>Guess the Number</title>
</head>
<body>
  <div id="header">
    <h1 id="title">Guess the Number</h1>
  </div>
  <div id="menu">
    <u><h2>Level Select</h2></u>
    <br>
    <button id="easy" onclick="easy()"><b>Easy</b></button>
    <button id="medium" onclick="medium()"><b>Medium</b></button>
    <button id="hard" onclick="hard()"><b>Hard</b></button>
    <button id="insane" onclick="insane()"><b>Insane</b></button>
  </div>
</body>
</html>

答案 4 :(得分：0)

您的代码中有两个问题：

  • 在您的easyGuess函数中，您检查easyDiv值document.getElementById('easyDiv').value == easyNum，但实际上您想这样检查一下easyGuess值：document.getElementById('easyGuess').value == easyNum。
  • 您的变量easyNum的作用域为函数easy。为此，您有几种不同的选择：

选项1：在easyNum函数之外定义easy： 

var easyNum;

function easy() {
  easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
}

function guessEasy() {
  if (document.getElementById('easyGuess').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}

选项2：从easy函数调用guessEasy函数： 

var easy = function() {
  var num = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy()'>Guess!</button></div>";
  return num;
}

function guessEasy() {
  var easyNum = easy();
  if (document.getElementById('easyGuess').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";
  }
}

选项＃3：如此处已经建议的另一个StackOverflow用户一样，将easyNum传递给guessEasy作为参数： 

function easy() {
  var easyNum = Math.floor(Math.random() * 6);
  document.getElementById('menu').innerHTML = "<div id='easyDiv'><p>Guess a number between 1 and 5</p><br><input id='easyGuess'><br><br><button id='guess' onclick='guessEasy("+ easyNum +")'>Guess!</button></div>";
}

function guessEasy(easyNum) {
  if (document.getElementById('easyGuess').value == easyNum) {
    document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";
  } else {
    document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was " + easyNum + ".</h2>";
  }
}

相关问题
最新问题