Ошибка в коде js [закрыт]

200
30 октября 2019, 00:20

Файл js подключен перед закрывающим тегом body

var randomNumber = Math.floor(Math.random() * 100) +1 ;
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrrHi');
var guessSubmit = document.querySelector('.quessSubmit');
var guessField = document.querySelector('.quessField');
var quessCount = 1;                                         
var resetButton;
function checkGuess() {
    alert('I am a placeholder');
}
function checkGuess() {
  var userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = 'Previous guesses: ';
  }
  guesses.textContent += userGuess + ' ';
  if (userGuess === randomNumber) {
    lastResult.textContent = 'Congratulations! You got it right!';
    lastResult.style.backgroundColor = 'green';
    lowOrHi.textContent = '';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    setGameOver();
  } else {
    lastResult.textContent = 'Wrong!';
    lastResult.style.backgroundColor = 'red';
    if(userGuess < randomNumber) {
      lowOrHi.textContent = 'Last guess was too low!';
    } else if(userGuess > randomNumber) {
      lowOrHi.textContent = 'Last guess was too high!';
    }
  }
  guessCount++;
  guessField.value = '';
  guessField.focus();
}
guessSubmit.addEventListener('click', checkGuess);
function setGameOver() {
    guessField.disabled = true;
    guessSubmit.disabled = true;
    resetButton = document.createElement('button');
    resetButton.textContent = 'Start new game';
    document.body.appendChild(resetButton);
    resetButton.addEventListener('click', resetGame);
}
function resetGame() {
    guessCount = 1;
    const resetParas = document.querySelectorAll('.resultParas p');
    for(let i = 0 ; i < resetParas.length ; i++) {
    resetParas[i].textContent = '';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.random() * 100) + 1;
}

Так же html:

<!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 fewer. 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">
      <input class="guessSubmit" type="submit" value="Submit guess">
    </div>
    <div class="resultParas">
      <p class="guesses"></p>
      <p class="lastResult"></p>
      <p class="lowOrHi"></p>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

Сама ошибка:

Answer 1

Может потому что не quessSubmit а guessSubmit

var randomNumber = Math.floor(Math.random() * 100) +1 ; 
 
var guesses = document.querySelector('.guesses'); 
var lastResult = document.querySelector('.lastResult'); 
var lowOrHi = document.querySelector('.lowOrrHi'); 
 
var guessSubmit = document.querySelector('.guessSubmit'); 
var guessField = document.querySelector('.guessField'); 
 
var quessCount = 1;                                          
var resetButton; 
 
function checkGuess() { 
    alert('I am a placeholder'); 
} 
 
function checkGuess() { 
  var userGuess = Number(guessField.value); 
 
  if (guessCount === 1) { 
    guesses.textContent = 'Previous guesses: '; 
  } 
  guesses.textContent += userGuess + ' '; 
 
  if (userGuess === randomNumber) { 
    lastResult.textContent = 'Congratulations! You got it right!'; 
    lastResult.style.backgroundColor = 'green'; 
    lowOrHi.textContent = ''; 
    setGameOver(); 
  } else if (guessCount === 10) { 
    lastResult.textContent = '!!!GAME OVER!!!'; 
    setGameOver(); 
  } else { 
    lastResult.textContent = 'Wrong!'; 
    lastResult.style.backgroundColor = 'red'; 
    if(userGuess < randomNumber) { 
      lowOrHi.textContent = 'Last guess was too low!'; 
    } else if(userGuess > randomNumber) { 
      lowOrHi.textContent = 'Last guess was too high!'; 
    } 
  } 
 
  guessCount++; 
  guessField.value = ''; 
  guessField.focus(); 
} 
 
guessSubmit.addEventListener('click', checkGuess); 
 
function setGameOver() { 
    guessField.disabled = true; 
    guessSubmit.disabled = true; 
    resetButton = document.createElement('button'); 
    resetButton.textContent = 'Start new game'; 
    document.body.appendChild(resetButton); 
    resetButton.addEventListener('click', resetGame); 
} 
function resetGame() { 
    guessCount = 1; 
    const resetParas = document.querySelectorAll('.resultParas p'); 
    for(let i = 0 ; i < resetParas.length ; i++) { 
    resetParas[i].textContent = ''; 
} 
resetButton.parentNode.removeChild(resetButton); 
guessField.disabled = false; 
guessSubmit.disabled = false; 
guessField.value = ''; 
guessField.focus(); 
lastResult.style.backgroundColor = 'white'; 
randomNumber = Math.floor(Math.random() * 100) + 1; 
}
html { 
        font-family: sans-serif; 
      } 
      body { 
        width: 50%; 
        max-width: 800px; 
        min-width: 480px; 
        margin: 0 auto; 
      } 
      .lastResult { 
        color: white; 
        padding: 3px; 
      }
    <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 fewer. 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"> 
      <input class="guessSubmit" type="submit" value="Submit guess"> 
    </div> 
 
    <div class="resultParas"> 
      <p class="guesses"></p> 
      <p class="lastResult"></p> 
      <p class="lowOrHi"></p> 
    </div>

READ ALSO
Чтение и запись данны из файла в javascript
javascript

Чтение и запись данны из файла в javascript

У меня есть html файл, мне нужно из него считать строку, и добавить её в другой html файл, который в это время открыт в браузереПосле добавление...

 172
Появление блока при onMouseMove, React.js
javascript

Появление блока при onMouseMove, React.js

Дан следующий код на React

 170
Как вставить ссылку в html?
HTML

Как вставить ссылку в html?

Есть тег [product_review_link] вместо которого в html шаблоне письма сайтом рассылки должна подставляться ссылка на сайт, помогите пожалуйста мне её туда...

 168
Верстка html-код - нетривиальная задача
HTML

Верстка html-код - нетривиальная задача

 195