這個JavaScript腳本有什麼問題？

-4

我正在試圖通過以下練習從MDN網站學習JavaScript Learn JavaScript 這個JavaScript腳本有什麼問題？

這裏是我最終的遊戲代碼。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 

 
    <title>Number guessing game</title> 
 

 
    <style> 
 
    html { 
 
     font-family: sans-serif; 
 
    } 
 
    body { 
 
     width: 50%; 
 
     max-width: 800px; 
 
     min-width: 480px; 
 
     margin: 0 auto; 
 
    } 
 
    .lastResult { 
 
     color: white; 
 
     padding: 3px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1>Number guessing game</h1> 
 

 
    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.</p> 
 

 

 
    <div class="form"> 
 
    <label for="guessField">Enter a guess:</label> 
 
    <input type="text" id="guessField" class="guessField" autofocus> 
 
    <input type="submit" value="Submit guess" class="guessSubmit"> 
 
    </div> 
 

 

 

 
    <div class="resultParas"> 
 
    <p class="guesses"></p> 
 
    <p class="lastResult"></p> 
 
    <p class="lowOrHi"></p> 
 
    </div> 
 

 
</body> 
 
<script> 
 
    // Your JavaScript goes here 
 
    var randomNumber = Math.floor(Math.random() * 100) + 1; 
 

 
    var guesses = document.querySelector(".guesses"); 
 
    var lastResult = document.querySelector(".lastResult"); 
 
    var lowOrHi = document.querySelector(".lowOrHi"); 
 

 
    var guessField = document.querySelector(".guessField"); 
 
    var guessSubmit = document.querySelector(".guessSubmit"); 
 
    var test; //used for creating new reset button 
 
    var count = 1; // counter for counting user input 
 

 
    function checkGuess() { 
 
    //alert('checkGuess is called'); 
 
    var value = Number(guessField.value); 
 
    if (count === 1) { 
 
     guesses.textContent = "Previous guesses :" 
 
    } 
 
    guesses.textContent += value + ' '; 
 

 

 

 
    if (value === randomNumber) { 
 
     lastResult.textContent = "congratulation u successfully guessed the number"; 
 
     lastResult.style.backgroundColor = "green"; 
 
     lowOrHi.textContent = ""; 
 
     left = 1; 
 
     setGameOver(); 
 
    } else if (count === 10) { 
 
     lastResult.textContent = "game over" 
 
     lastResult.style.backgroundColor = "red"; 
 
     left = 1; 
 
     setGameOver(); 
 
    } else { 
 

 
     lastResult.textContent = "WRONG"; 
 
     lastResult.style.backgroundColor = "red"; 
 

 
     if (value < randomNumber) { 
 
     lowOrHi.textContent = "too low"; 
 
     } else { 
 
     lowOrHi.textContent = "too high"; 
 
     } 
 
    } 
 

 
    count++; 
 
    guessField.value = ''; 
 

 
    } 
 

 
    guessSubmit.addEventListener("click", checkGuess); 
 

 

 
    function setGameOver() { 
 
    guessField.disabled = true; 
 
    guessSubmit.disabled = true; 
 
    test = document.createElement('button'); 
 
    test.textContent = "restart game"; 
 
    document.body.appendChild(test); 
 
    test.addEventListener('click', resetGame); 
 
    } 
 

 

 

 
    function resetGame() { 
 
    count = 1; 
 

 
    var resetParas = document.querySelectorAll('.resultParas'); 
 
    for (var i = 0; i < resetParas.length; i++) { 
 
     resetParas[i].textContent = ''; 
 
    } 
 

 
    guessField.disabled = false; 
 
    guessSubmit.disabled = false; 
 
    guessField.value = ''; 
 
    lastResult.style.backgroundColor = 'white'; 
 

 
    randomNumber = Math.floor(Math.random() * 100) + 1; 
 

 
    test.parentNode.removeChild(test); 
 
    } 
 
</script> 
 

 
</html>

但是，當我嘗試運行遊戲和使用重置遊戲按鈕，重新啓動遊戲，然後我不能夠操縱的猜測，使用的textContent和的backgroundColor屬性的lastResult和lowOrHi元素。

來源

2016-11-04 Manvendra Singh

請推薦任何其他有用的資源來學習JavaScript。 –

使這個代碼片段可以讓我們嘗試執行你所做的一切。你需要做的最主要的事情就是將其降低到[mcve]。然後每個人都可以專注於什麼不工作。 – Teepeemm

您是否嘗試過使用'.value'而不是'.textContent' –

你的空白裏面的一切.resultParas ..這將包括你所有的<p>標籤。 IOW：在這樣做之後，他們已經從DOM中消失了，你可以在Chrome檢查器中看到這個說法.resultPara的點擊reset game後現在是空白的，並且你所有的p標記都已經消失。

我想你真正想要做的，是空出來的孩子（在p標籤）..

你不需要querySelectorAll或者，在你的情況下，只有一個。

var resetParas = document.querySelector('.resultParas'); 
for(var i = 0 ; i < resetParas.children.length ; i++) { 
    resetParas.children[i].textContent = ''; 
}

來源

2016-11-04 14:35:50 Keith

這個JavaScript腳本有什麼問題？

回答

相關問題