猿问

如何让我的猜测功能在我的猜数字游戏中发挥作用?

我正在用 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>


繁星coding
浏览 118回答 3
3回答

素胚勾勒不出你

错误 1:您将 easyNum 声明为 easy() 本地。错误 2:您试图使用 div 的值 (easyDiv)。var easyNum; //change 1function easy() {&nbsp; easyNum = Math.floor(Math.random() * 6);&nbsp; 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() {&nbsp; if (document.getElementById('easyGuess').value == easyNum) { //change 2&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";&nbsp; } else {&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";&nbsp; }}

HUX布斯

easyNum仅存在于创建它的功能块中。您要么需要将其设置为全局变量以便guessEasy()可以访问它,要么将其作为参数传递给guessEasy()像这样:"<div ... onclick='guessEasy(" + easyNum + ")' ...></div>"至于您的其他难度级别,则由您来实现功能medium(),hard()并使insane()游戏的其余部分正常运行。function easy() {&nbsp; var easyNum = Math.floor(Math.random() * 6);&nbsp; 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) {&nbsp; if (document.getElementById('easyGuess').value == easyNum) { // change to 'easyGuess'&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";&nbsp; } else {&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was " + easyNum + ".</h2>";&nbsp; }}* {&nbsp; margin: 0px;}#guess {&nbsp; padding: 5px;&nbsp; border-color: #c3c3c3;&nbsp; background: #c3c3c3;}input {&nbsp; border: 0.5px solid #000000;&nbsp; border-radius: 5px;&nbsp; outline: none;&nbsp; background: #d4d4d4;}button {&nbsp; border: solid;&nbsp; border-color: #000000;&nbsp; border-radius: 7.5px;&nbsp; padding: 7.5px;&nbsp; outline: none;&nbsp; cursor: pointer;}#easy {&nbsp; background: #00ff00;}#medium {&nbsp; background: #ffff00;}#hard {&nbsp; background: #ff6600;}#insane {&nbsp; background: #ff0000;}#menu {&nbsp; border-radius: 10px;&nbsp; text-align: center;&nbsp; position: absolute;&nbsp; transform: translate(-50%, -50%);&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; padding: 25px;&nbsp; background: #ffffff;&nbsp; opacity: 0.9;&nbsp; font-family: arial;}#header {&nbsp; background-color: #ffffff;&nbsp; opacity: 0.7;&nbsp; width: 100%;&nbsp; height: 120px;&nbsp; position: relative;}#title {&nbsp; font-family: arial;&nbsp; position: absolute;&nbsp; transform: translate(-50%, -50%);&nbsp; top: 50%;&nbsp; left: 50%;}body {&nbsp; background: radial-gradient(#aaaaff, #00003b) no-repeat center center;&nbsp; background-size: 100% 100%;}<html><head>&nbsp; <title>Guess the Number</title></head><body>&nbsp; <div id="header">&nbsp; &nbsp; <h1 id="title">Guess the Number</h1>&nbsp; </div>&nbsp; <div id="menu">&nbsp; &nbsp; <u><h2>Level Select</h2></u>&nbsp; &nbsp; <br>&nbsp; &nbsp; <button id="easy" onclick="easy()"><b>Easy</b></button>&nbsp; &nbsp; <button id="medium" onclick="medium()"><b>Medium</b></button>&nbsp; &nbsp; <button id="hard" onclick="hard()"><b>Hard</b></button>&nbsp; &nbsp; <button id="insane" onclick="insane()"><b>Insane</b></button>&nbsp; </div></body></html>

RISEBY

您的代码中有两个问题:在你的easyGuess功能,你检查easyDiv价值document.getElementById('easyDiv').value == easyNum,但实际上要检查easyGuess值是这样的:document.getElementById('easyGuess').value == easyNum。您的变量easyNum范围为您的函数easy。为此,您有几个不同的选择:选项#1:easyNum在easy函数之外定义:var easyNum;function easy() {&nbsp; easyNum = Math.floor(Math.random() * 6);&nbsp; 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() {&nbsp; if (document.getElementById('easyGuess').value == easyNum) {&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";&nbsp; } else {&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";&nbsp; }}选项#2:easy从你的guessEasy函数中调用你的函数:var easy = function() {&nbsp; var num = Math.floor(Math.random() * 6);&nbsp; 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>";&nbsp; return num;}function guessEasy() {&nbsp; var easyNum = easy();&nbsp; if (document.getElementById('easyGuess').value == easyNum) {&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";&nbsp; } else {&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was" + easyNum + ".</h2>";&nbsp; }}选项#3:作为另一个StackOverflow的用户已经在这里建议,传递easyNum到guessEasy作为参数:function easy() {&nbsp; var easyNum = Math.floor(Math.random() * 6);&nbsp; 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) {&nbsp; if (document.getElementById('easyGuess').value == easyNum) {&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is correct!</h2>";&nbsp; } else {&nbsp; &nbsp; document.getElementById('menu').innerHTML = "<h2>That is incorrect.</h2><h2>The number was " + easyNum + ".</h2>";&nbsp; }}
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答