当玩家做正确的猜测时，首先显示错误警报，然后显示成功警报。我只希望在错误上显示错误警报，并在成功时显示成功。
我尝试在if else语句中加入成功警报。
失败警报始终运行。没有IF语句来防止它。
尝试以下操作：
if(guessBoxes[guess-1] == "X"){
alert("GAME OVER - YOU FOUND IT! A WINNER");
} else {
alert("SORRY WRONG GUESS!; ");
}
另外，如果 - else语句，只需返回false，如果他们输入无效号码，则首先要返回false。它消除了对大型语句的需求，并增加了代码可读性：
function playGuessingGame() {
var guess = document.getElementById("numberToGuess").value;
var date = "";
if (isNaN(guess) || guess < 1 || guess > 9) {
alert("YOU CAN ONLY PLAY WITH NUMBERS 1-9 ");
return false;
}
var gemPosition = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
var guessBoxes = ["O", "O", "O", "O", "O", "O", "O", "O", "O"];
guessBoxes[gemPosition - 1] = "X";
if (guess == 1) {
document.getElementById("guessBox1").innerHTML = guessBoxes[guess - 1];
} else if (guess == 2) {
document.getElementById("guessBox2").innerHTML = guessBoxes[guess - 1];
} else if (guess == 3) {
document.getElementById("guessBox3").innerHTML = guessBoxes[guess - 1];
} else if (guess == 4) {
document.getElementById("guessBox4").innerHTML = guessBoxes[guess - 1];
} else if (guess == 5) {
document.getElementById("guessBox5").innerHTML = guessBoxes[guess - 1];
} else if (guess == 6) {
document.getElementById("guessBox6").innerHTML = guessBoxes[guess - 1];
} else if (guess == 7) {
document.getElementById("guessBox7").innerHTML = guessBoxes[guess - 1];
} else if (guess == 8) {
document.getElementById("guessBox8").innerHTML = guessBoxes[guess - 1];
} else if (guess == 9) {
document.getElementById("guessBox9").innerHTML = guessBoxes[guess - 1];
}
if (guessBoxes[guess - 1] == "X") {
alert("GAME OVER - YOU FOUND IT! A WINNER");
} else {
alert("SORRY WRONG GUESS!; ");
}
document.getElementById("response").innerHTML;
}
这是一个具有更改的工作codepen：
https://codepen.io/zorlacmeister/pen/wvjzkv
我已经将gemposition和猜测变量移到了功能之外，因为每次单击按钮时，该功能都会调用。我还添加了gamerEset函数。
您的代码看起来很荒谬，所以我写了一些简单的东西来帮助您理解：
var doc, bod, I, guessingGame; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
I = function(id){
return doc.getElementById(id);
}
guessingGame = function(guessInput, outputDiv, resetButton){
var g = Math.floor(Math.random()*10)+1;
guessInput.onchange = function(){
var s = this.value, n = +s, r;
if(!s.match(/^([1-9]|10)$/)){
r = 'Invalid Number';
}
else if(g === n){
r = 'You Win!';
}
else{
r = 'Guess Again';
}
outputDiv.innerHTML = r;
}
resetButton.onclick = function(){
g = Math.floor(Math.random()*10)+1; guessInput.value = outputDiv.innerHTML = '';
}
}
guessingGame(I('guess'), I('out'), I('reguess'));
}); // end load/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0; border:none; outline:none;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px;
}
lable{
display:inline-block;
}
#guess{
width:40px; font-size:14px; padding-left:3px; margin-left:4px;
}
input[type=button]{
padding:2px 5px;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div id='content'>
<label for='guess'>Pick a number between 1 and 10</label><input id='guess' type='number' value='' min='0' max='10' maxlength='2' />
<input id='reguess' type='button' value='reset' />
<div id='out'></div>
</div>
</body>
</html>