我如何使我的猜测函数在我猜数字游戏中起作用?

问题描述 投票:-1回答:5

我正在用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的帮助)

javascript html css function
5个回答
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>";
  }
}

1
投票

[easyNum仅存在于创建它的功能块中。您需要将其设置为全局变量,以便guessEasy()可以访问它,或像这样将其作为参数传递给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%;
}
<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>

0
投票

您需要将var 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>";
  }
}

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>

0
投票

您的变量easyNum的作用域是您的函数easy。您有几种不同的选择,但是一种快速的选择是在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('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>";
  }
}

另一种选择是从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('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>";
  }
}

第三个选项,如另一个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('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>";
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.