stackoom
  简体   繁体   中英

How do I make my guess function work in my guess the number game?

 原文  2019-10-08 00:56:07  1   5    javascript/ html/ css/ function

Question

I am making a guess the number game with HTML, CSS, and javascript. I can't seem to figure out what I'm doing wrong with my javascript. I've tried multiple things to make it work, but I can't figure it out. The only button I'm working on right now is the easy game mode. Some of it will work, but the guess button won't work. Here's my code: 

 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>

I hope you can help me with this. Thanks! (I just need help with the javascript)

5 answers

solution1
 1  2019-10-08 01:02:29

easyNum only exists within the function block that it was created in. You either need to make it a global variable so that guessEasy() can access it, or pass it as an argument to guessEasy() like so: 

"<div ... onclick='guessEasy(" + easyNum + ")' ...></div>"

As for your other difficulty levels, it's up to you to implement the functions medium() , hard() and insane() to get the rest of the game working. 

 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>

solution2
 1  2019-10-08 01:18:55

error 1: You declared the easyNum local to easy().

error 2: You were trying to use the div's value (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>";
  }
}

solution3
 0  2019-10-08 01:03:14

You need to put var easyNum; outside of the function so that it can be used globally.

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>";
  }
}

solution4
 0  2019-10-08 01:04:47

You need to declare the "easyNum" variable outside of the function. like this: 

 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>

solution5
 0  2019-10-08 01:05:53

There are two issues in your code:

  • In your easyGuess function you check the easyDiv value, document.getElementById('easyDiv').value == easyNum , but actually you want to check the easyGuess value like this: document.getElementById('easyGuess').value == easyNum .
  • Your variable easyNum is scoped to your function easy . For this, you have a few different options:

Option #1: define easyNum outside of your easy function: 

 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>"; } }

Option #2: call your easy function from your guessEasy function: 

 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>"; } }

Option #3: as another StackOverflow user already suggested here, pass easyNum into guessEasy as an argument: 

 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>"; } }

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Simple Guess my Number Game in Javascript How come my guess the number game in JavaScript isn't working? How can I make my guess-password code's loop work? Adding a guess loop to my Javascript number guessing game “Guess the number” JS game function problem Cold, warm game-how can I make the random number not to change every time user put a guess number in JavaScript . There is no limit on guess answer Javascript guess number game not working im doing a guess the number project but my if else doesn't seem to work properly. what am i doing wrong? In school and trying to create the classic guess a number game. What did I do wrong? How to keep track of attempts in a JavaScript guess-the-number game
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM