Was ist mit diesem JavaScript-Skript falsch?

-4

Ich versuche, JavaScript zu lernen, indem Sie dieser Übung von der MDN-Website Learn JavaScript Was ist mit diesem JavaScript-Skript falsch?

hier ist mein endgültiger Code für das Spiel.

<!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>

Aber wenn ich versuche, das Spiel zu starten und die Reset-Spiel-Taste, um das Spiel neu zu starten, dann in der Lage ist ich nicht Vermutungen zu manipulieren, lastresult und lowOrHi Elemente textcontent und Backgroundcolor Eigenschaften verwenden.

Quelle

2016-11-04 Manvendra Singh

Bitte empfehlen Sie alle anderen nützlichen Ressourcen für das Erlernen von Javascript. –

Wenn wir dies zu einem Code-Snippet machen, können wir versuchen, das auszuführen, was Sie heruntergefahren haben. Das Wichtigste, was Sie tun müssen, ist, dies auf einen [mcve] zu reduzieren. Dann kann sich jeder darauf konzentrieren, was nicht funktioniert. – Teepeemm

Haben Sie versucht, '.value' anstelle von' .textContent' zu verwenden? –

Ihre ausgeblendet alles in .resultParas .. Und das wird alle Sie <p> Tags enthalten. IOW: nachdem sie das getan haben, sind sie aus dem DOM verschwunden, Sie können das im Chrom-Inspektor sagen, dass .resultPara nach dem Klicken auf reset game jetzt leer ist und alle Ihre p Tags verschwunden sind.

Ich denke, was Sie wirklich tun wollen, ist aus den Kindern (die p-Tags) blank ..

Sie querySelectorAll entweder nicht brauchen, wie in Ihrem Fall gibt es nur die eine.

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

Quelle

2016-11-04 14:35:50 Keith

Was ist mit diesem JavaScript-Skript falsch?

Antwort

Verwandte Themen