Question

当玩家做出正确的猜测时，首先显示错误警报，然后显示成功警报。我只希望在错误时显示错误警报，并在成功时显示成功。

我尝试在if else语句中包含成功警报。

Answer 1

故障警报始终运行。没有if语句可以阻止它。

尝试一下：

if(guessBoxes[guess-1] == "X"){
    alert("GAME OVER - YOU FOUND IT! A WINNER");
} else {
    alert("SORRY WRONG GUESS!; ");
}

此外，如果输入的数字无效，则返回false，而不是第一个if-else语句。它消除了对大型else语句的需求，并提高了代码的可读性：

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

这是进行更改的工作码本：

https://codepen.io/ZorlacMeister/pen/wVJzKv

我将gemPosition和guessBoxes变量移到了函数之外，因为每次您单击按钮时都会调用该函数。我还添加了gameReset函数。

Answer 2

您的代码看起来很荒谬，所以我写了一些简单的内容来帮助您理解：

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>

我的成功消息与我的错误消息一起显示

2 个答案: