我正在用 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>
素胚勾勒不出你
HUX布斯
RISEBY
相关分类