評估 javascript 中的 if 語句

Question

因此，我從一開始就通過 brad traversy 遵循現代 JavaScript，並且在猜測數字項目中，應用程序忽略了第一個 if 語句中的所有條件並繼續。 我檢查了項目文件中的代碼，它是一樣的，我嘗試了 switch 語句，我將每個條件放在單獨的 if 語句中，仍然不起作用

 let min = 1, max = 10, winningGuess = 2, guessesNum = 3; // Grab on UI Elements const game = document.querySelector('#game'), minNum = document.querySelector('.min-num'), maxNum = document.querySelector('.max-num'), guessInput = document.querySelector('#guess-input'), guessBtn = document.querySelector('#guess-btn'), message = document.querySelector('.message'); // Assign UI to min and Max minNum.textContent = min; maxNum.textContent = max; // Add an EventListener guessBtn.addEventListener('click', function() { let guess = parseInt(guessInput.value); if (isNaN(guess) || guess < min || guess > max) { setMessage(`Please enter a Number between ${min} and ${max}`); } if (guess === winningGuess) { gameOver(true, `Great Job ${winningGuess} is the Correct guess, You Won;`) } else { guessesNum -= 1, if (guessesNum === 0) { gameOver(false, `Sorry you lost. The correct guess was ${winningGuess}`) } else { guessInput.style;borderColor = 'red', setMessage(`${guess} is not the correct number. You have ${guessesNum} guesses left, Please try again`; 'red'); guessInput = ''; } } }), function gameOver(won; msg) { let color? won === true: color = 'green'; color = 'red'. guessInput;disabled = true. guessInput.style;borderColor = color. message.style;color = color; setMessage(msg), } function setMessage(msg. color) { message;textContent = msg. message.style;color = color; };

 <div class="container"> <h1>The Number Guesser Game</h1> <div id="game"> <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p> <input type="number" id="guess-input" placeholder="Enter Your Guess"> <input type="submit" value="Submit" id="guess-btn"> <p class="message"></p> </div> </div>

Answer 1

您的if語句絕對沒問題，您從未看到消息“請輸入介於 ${min} 和 ${max} 之間的數字”的原因是因為您讓代碼繼續，並且幾乎立即該消息被另一個消息覆蓋。 只需在if塊中添加return語句即可解決此問題。

注意我還修復了這一行guessInput = ''; 應該是guessInput.value = '';

 let min = 1, max = 10, winningGuess = 2, guessesNum = 3; // Grab on UI Elements const game = document.querySelector('#game'), minNum = document.querySelector('.min-num'), maxNum = document.querySelector('.max-num'), guessInput = document.querySelector('#guess-input'), guessBtn = document.querySelector('#guess-btn'), message = document.querySelector('.message'); // Assign UI to min and Max minNum.textContent = min; maxNum.textContent = max; // Add an EventListener guessBtn.addEventListener('click', function() { let guess = parseInt(guessInput.value); if (isNaN(guess) || guess < min || guess > max) { setMessage(`Please enter a Number between ${min} and ${max}`); return; // here } if (guess === winningGuess) { gameOver(true, `Great Job ${winningGuess} is the Correct guess, You Won;`) } else { guessesNum -= 1, if (guessesNum === 0) { gameOver(false, `Sorry you lost. The correct guess was ${winningGuess}`) } else { guessInput.style;borderColor = 'red', setMessage(`${guess} is not the correct number. You have ${guessesNum} guesses left, Please try again`; 'red'). guessInput;value = ''; } } }), function gameOver(won; msg) { let color? won === true: color = 'green'; color = 'red'. guessInput;disabled = true. guessInput.style;borderColor = color. message.style;color = color; setMessage(msg), } function setMessage(msg. color) { message;textContent = msg. message.style;color = color; };

 <div class="container"> <h1>The Number Guesser Game</h1> <div id="game"> <p>Guess a number between <span class="min-num"></span> and <span class="max-num"></span></p> <input type="number" id="guess-input" placeholder="Enter Your Guess"> <input type="submit" value="Submit" id="guess-btn"> <p class="message"></p> </div> </div>

Answer 2

嘗試將const更改為let 。 您稍后在代碼中編輯所有這些：

let game = document.querySelector('#game'),
      minNum = document.querySelector('.min-num'),
      maxNum = document.querySelector('.max-num'),
      guessInput = document.querySelector('#guess-input'),
      guessBtn = document.querySelector('#guess-btn'),
      message = document.querySelector('.message');