Игра угадывания чисел Uncaught SyntaxError: Unexpected token

112
18 декабря 2020, 18:30

Выскакивает ошибка

Uncaught SyntaxError: Unexpected token.

Не пойму в чем ошибка - вроде все правильно прописываю. Кто в чем видит мою ошибку- что нужно поправить?

class Game { 
  constructor(config) { 
    this.min = min; 
    this.max = max; 
    this.guesses = document.querySelector(config.guesses); 
    this.lustResult = document.querySelector(config.lustResult); 
    this.lowOrHi = document.querySelector(config.lowOrHi); 
    this.guessField = document.querySelector(config.guessField); 
    this.guesSubmit = document.querySelector(config.guesSubmit); 
    this.guessCount = 1; 
    this.resetButton; 
    this.randomIntenger(); 
    this.checkGuess(); 
 
 
  } 
 
 
  randomIntenger() { 
    var rand = this.min - 0.5 + Math.random() * (this.max - this.min + 1) 
    this.randomNumber = Math.round(rand); 
    return this.randomNumber; 
  } 
 
  checkGuess() { 
    if (this.guessField.value === "") { 
      alert("Заполните пустое поле!"); 
      return 
    } 
    var userGeuss = Number(this.guessField.value); //проверяем число или буква 
    if (this.guessCount === 1) { 
      this.guesses.textContent = "Предыдущие числа: "; 
    } 
    this.guesses.textContent += userGeuss + " "; 
 
    if (userGeuss === this.randomNumber) { 
      this.lustResult.textContent = alert("Поздравляю вы угадали число"); 
      this.lustResult.style.background = 'green'; 
      this.lowOrHi.textContent = ''; 
      this.setGameOver(); 
    } else if (this.guessCount === 3) { 
      this.lustResult.textContent = 'Ваши попытки закончились. Игра окончена'; 
      this.lustResult.style.background = 'blue'; 
      this.setGameOver(); 
    } else { 
      this.lustResult.textContent = "Не верно"; 
      this.lustResult.style.background = 'red'; 
      if (userGeuss < this.randomNumber) { 
        this.lowOrHi.textContent = "Теплее"; 
        this.lowOrHi.style.background = 'yellow'; 
      } else if (userGeuss > rthis.andomNumber) { 
        this.lowOrHi.textContent = "Холодно"; 
        this.lowOrHi.style.background = 'blue'; 
      } 
    } 
    this.guessCount++; 
    this.guessField.value = ''; 
    this.guessField.focus(); 
  } 
 
  this.guesSubmit.addEventListener('click', this.checkGuessbind); 
 
  setGameOver() { 
    this.guessField.disabled = true; 
    this.guesSubmit.disabled = true; 
    this.resetButton = document.createElement('button'); 
    this.resetButton.textContent = 'Новая игра'; 
    document.body.appendChild(this.resetButton); 
    this.resetButton.addEventListener('click', resetGame); 
  } 
 
  resetGame() { 
    this.guessCount = 1; 
 
    var resetParam = document.querySelectorAll('.resultParam p'); 
    for (var i = 0; i < resetParam.length; i++) { 
      console.log(resetParam[i].textContent); 
      resetParam[i].textContent = ''; 
    } 
 
    this.resetButton.parentNode.removeChild(this.resetButton); 
 
    this.guessField.disabled = false; 
    this.guesSubmit.disabled = false; 
 
    this.guessField.value = ''; 
    this.guessField.focus(); 
 
    this.lustResult.style.background = 'white'; 
 
    this.randomNumber = randomItenger(1, 5); 
  } 
 
} 
 
 
 
 
var game = new Game({ 
  min: 1, 
  max: 5, 
  guesses: '.guesses', 
  lustResult: '.lustResult', 
  lowOrHi: '.lowOrHi', 
  guessField: '.guessField', 
  guesSubmit: '.guesSubmit' 
}); 
 
console.log();
.lustResult { 
  width: 30%; 
  color: #fff; 
  padding: 5px; 
  border-radius: 5px; 
  text-align: center; 
} 
 
.lowOrHi { 
  padding: 5px; 
  width: 20%; 
  text-align: center; 
  border-radius: 5px; 
  font-weight: 700; 
}
<!-- Используя ооп, создать игру, которая загадывает целое РАНДОМНОЕ число от min до max ! У пользователя есть три попытки его угадать. Количество оставшихся попыток красиво выводятся в дом, угадывает он через инпут. Также нужно давать подсказки человеку (например "тепло" или "холодно") по отношению к угадываемому числу, подсказки сначало не активны. Активируй их, например, с помощью чекбокса --> 
<!-- Так же было бы хорошо, придумать где можно сделать наследование --> 
<div class="vrapper"> 
  <h1>Угадайте число</h1> 
  <p>мы загодали ранодомное число от .. до .. У вас есть 3 попытки угадать</p> 
  <div class="form"> 
    <label for="guessField">Введите число: </label> 
    <input type="text" id="guessField" class="guessField"> 
    <input type="submit" value="Угадать" class="guesSubmit"> 
  </div> 
  <div class="resultParam"> 
    <p class="guesses"></p> 
    <p class="lustResult"></p> 
    <p class="lowOrHi"></p> 
  </div> 
</div>

Answer 1

строка

this.guesSubmit.addEventListener('click', this.checkGuessbind);

находится вне тела любого из методов. Поэтому this в данном случается рассматривается как имя метода за которым должно следовать определение, однако в данном случае следует символ точки. Поэтому и происходит указанная ошибка.

Для решения нужно внести данный код в один из уже описанных методов. Вероятнее всего он должен быть внутри checkGuess:

class Game { 
  constructor(config) { 
    this.min = min; 
    this.max = max; 
    this.guesses = document.querySelector(config.guesses); 
    this.lustResult = document.querySelector(config.lustResult); 
    this.lowOrHi = document.querySelector(config.lowOrHi); 
    this.guessField = document.querySelector(config.guessField); 
    this.guesSubmit = document.querySelector(config.guesSubmit); 
    this.guessCount = 1; 
    this.resetButton; 
    this.randomIntenger(); 
    this.checkGuess(); 
 
 
  } 
 
 
  randomIntenger() { 
    var rand = this.min - 0.5 + Math.random() * (this.max - this.min + 1) 
    this.randomNumber = Math.round(rand); 
    return this.randomNumber; 
  } 
 
  checkGuess() { 
    if (this.guessField.value === "") { 
      alert("Заполните пустое поле!"); 
      return 
    } 
    var userGeuss = Number(this.guessField.value); //проверяем число или буква 
    if (this.guessCount === 1) { 
      this.guesses.textContent = "Предыдущие числа: "; 
    } 
    this.guesses.textContent += userGeuss + " "; 
 
    if (userGeuss === this.randomNumber) { 
      this.lustResult.textContent = alert("Поздравляю вы угадали число"); 
      this.lustResult.style.background = 'green'; 
      this.lowOrHi.textContent = ''; 
      this.setGameOver(); 
    } else if (this.guessCount === 3) { 
      this.lustResult.textContent = 'Ваши попытки закончились. Игра окончена'; 
      this.lustResult.style.background = 'blue'; 
      this.setGameOver(); 
    } else { 
      this.lustResult.textContent = "Не верно"; 
      this.lustResult.style.background = 'red'; 
      if (userGeuss < this.randomNumber) { 
        this.lowOrHi.textContent = "Теплее"; 
        this.lowOrHi.style.background = 'yellow'; 
      } else if (userGeuss > rthis.andomNumber) { 
        this.lowOrHi.textContent = "Холодно"; 
        this.lowOrHi.style.background = 'blue'; 
      } 
    } 
    this.guessCount++; 
    this.guessField.value = ''; 
    this.guessField.focus(); 
    this.guesSubmit.addEventListener('click', this.checkGuessbind); 
  } 
 
 
 
  setGameOver() { 
    this.guessField.disabled = true; 
    this.guesSubmit.disabled = true; 
    this.resetButton = document.createElement('button'); 
    this.resetButton.textContent = 'Новая игра'; 
    document.body.appendChild(this.resetButton); 
    this.resetButton.addEventListener('click', resetGame); 
  } 
 
  resetGame() { 
    this.guessCount = 1; 
 
    var resetParam = document.querySelectorAll('.resultParam p'); 
    for (var i = 0; i < resetParam.length; i++) { 
      console.log(resetParam[i].textContent); 
      resetParam[i].textContent = ''; 
    } 
 
    this.resetButton.parentNode.removeChild(this.resetButton); 
 
    this.guessField.disabled = false; 
    this.guesSubmit.disabled = false; 
 
    this.guessField.value = ''; 
    this.guessField.focus(); 
 
    this.lustResult.style.background = 'white'; 
 
    this.randomNumber = randomItenger(1, 5); 
  } 
 
} 
 
 
 
 
var game = new Game({ 
  min: 1, 
  max: 5, 
  guesses: '.guesses', 
  lustResult: '.lustResult', 
  lowOrHi: '.lowOrHi', 
  guessField: '.guessField', 
  guesSubmit: '.guesSubmit' 
}); 
 
console.log();
.lustResult { 
  width: 30%; 
  color: #fff; 
  padding: 5px; 
  border-radius: 5px; 
  text-align: center; 
} 
 
.lowOrHi { 
  padding: 5px; 
  width: 20%; 
  text-align: center; 
  border-radius: 5px; 
  font-weight: 700; 
}
<!-- Используя ооп, создать игру, которая загадывает целое РАНДОМНОЕ число от min до max ! У пользователя есть три попытки его угадать. Количество оставшихся попыток красиво выводятся в дом, угадывает он через инпут. Также нужно давать подсказки человеку (например "тепло" или "холодно") по отношению к угадываемому числу, подсказки сначало не активны. Активируй их, например, с помощью чекбокса --> 
<!-- Так же было бы хорошо, придумать где можно сделать наследование --> 
<div class="vrapper"> 
  <h1>Угадайте число</h1> 
  <p>мы загодали ранодомное число от .. до .. У вас есть 3 попытки угадать</p> 
  <div class="form"> 
    <label for="guessField">Введите число: </label> 
    <input type="text" id="guessField" class="guessField"> 
    <input type="submit" value="Угадать" class="guesSubmit"> 
  </div> 
  <div class="resultParam"> 
    <p class="guesses"></p> 
    <p class="lustResult"></p> 
    <p class="lowOrHi"></p> 
  </div> 
</div>

READ ALSO
Ошибка при взятии json c сервера

Ошибка при взятии json c сервера

Пробую забрать json с сервера для дальнейшей манипуляции и получаю ошибку

125
Каким образом можно через js узнать логин и id пользователя яндекс аккаунта?

Каким образом можно через js узнать логин и id пользователя яндекс аккаунта?

Обнаружил, что если зайти на сайт ПДД и посмотреть в куки, то вы там увидите свой логин и ID яндекс аккаунта, если авторизованы на текущий момент...

105