我正在用 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>
3 回答
素胚勾勒不出你
TA贡献1827条经验 获得超9个赞
错误 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>";
}
}
HUX布斯
TA贡献1876条经验 获得超6个赞
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>
RISEBY
TA贡献1856条经验 获得超5个赞
您的代码中有两个问题：
在你的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>";
}
}
添加回答
举报
0/150
提交
取消