ご質問
初めて利用します、サイトの目的と異なっていたら申し訳ございません。
Modern Web docsの練習問題に残り回数を追記したく試行錯誤しているのですが、HTML内のscriptタグ上で
javascript
1guessRemain.textContent = "残り"+guessRem+"回";
と記述しHTML上で"残り"+guessRem+"回"と残り回数を表示しようとしても下記エラーが出てしまいます。
記述方法を細かく変更し試しましたが、解決に至りませんでしたので、どなたかご回答いただければ大変助かります。
よろしくお願いいたします。
前提
発生している問題・エラーメッセージ
Uncaught TypeError TypeError: Cannot set properties of null (setting 'textContent') at checkGuess)
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 html { 8 font-family: sans-serif; 9 } 10 11 body { 12 width: 50%; 13 max-width: 800px; 14 min-width: 480px; 15 margin: 0 auto; 16 } 17 18 .form input[type="number"] { 19 width: 200px; 20 } 21 22 .lastResult { 23 color: white; 24 padding: 3px; 25 } 26 27 28 29 </style> 30 </head> 31 <!--ここから内容--> 32 <body> 33 <h1>Number guessing game</h1> 34 35 <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low.</p> 36 <header> 37 <div class="form"> 38 <label for="guessField">Enter a guess: </label> 39 <input type="number" min="1" max="100" required id="guessField" class="guessField"> 40 <input type="submit" value="Submit guess" class="guessSubmit"> 41 </div> 42 43 <div class="resultParas"> 44 <p class="guesses"></p> 45 <p class="lastResult"></p> 46 <p class="lowOrHi"></p> 47 <p class="guessRemain"></p> 48 </div> 49 50 51 </header> 52 53 <main> 54 55 </main> 56 57 58 </body>
javascript
1<script>2 let randomNumber = Math.floor(Math.random() * 100) + 1;3 4 const guesses = document.querySelector('.guesses');5 const lastResult = document.querySelector('.lastResult');6 const lowOrHi = document.querySelector('.lowOrHi');7 const guessRemain = document.querySelector("guessRemain");8 9 const guessSubmit = document.querySelector('.guessSubmit');10 const guessField = document.querySelector('.guessField');11 12 let guessCount = 1;13 let resetButton;14 let guessRem = Number(10-guessCount);15 16 function checkGuess(){17 let userGuess = Number(guessField.value);18 guessRemain.textContent = "残り"+guessRem+"回";19 20 if (guessCount === 1){21 guesses.textContent = "前回の予想: ";22 }23 guesses.textContent += userGuess +" ";24 if (userGuess === randomNumber){25 lastResult.textContent = "おめでとう！正解です！";26 lastResult.style.backgroundColor = "green";27 lowOrHi.textContent = " ";28 setGameOver();29 }else if (guessCount === 10){30 lastResult.textContent = "!!!GAME OVER!!!";31 setGameOver();32 }else{lastResult.textContent = "間違いです！"33 lastResult.style.backgroundColor = "red";34 if(userGuess < randomNumber){35 lowOrHi.textContent="今の予想は小さすぎです！";36 }else if (userGuess > randomNumber){37 lowOrHi.textContent = "今の予想は大きすぎです！";38 }}39 40 41 guessCount++;42 guessField.value="";43 44 guessField.focus();45 }46 47 guessSubmit.addEventListener("click",checkGuess);48 49</script>50
0 コメント