Блог

Главная - Вопросы по программированию - Функция прослушивания событий щелчка Javascript не работает

Функция прослушивания событий щелчка Javascript не работает

#javascript #html #css

Вопрос:

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

Вот мой javascript. В этом разделе я пытаюсь добавить прослушиватель событий щелчка в идентификатор «угадай» и сгенерировать случайное число с помощью функции generateTarget

 let humanScore = 0;
let computerScore = 0;
let currentRoundNumber = 1;

// Write your code below:
const generateTarget = () => Math.random * 10

const compareGuesses = (human, computer, generateTarget) => Math.abs(human - generateTarget) > Math.abs(computer - generateTarget)

document.getElementById("guess").addEventListener("click", function() {
  document.getElementById("target-number").innerHTML = generateTarget()
}); 
 <!doctype html>

<html>

<head>
  <title>Number Guesser</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito Sans:400,700" rel="stylesheet">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="game-container">
    <header>
      <h1>Number Guesser!</h1>
    </header>

    <div class="rounds">
      <p class="round-label">Round <span id="round-number">1</span></p>
      <p class="guess-label">Target Number: <span id="target-number">?</span></p>=
    </div>

    <div class="guessing-area">
      <div class="guess computer-guess">
        <div class="guess-title">
          <p class="guess-label">Computer</p>
          <p class="score-label">Score: <span id="computer-score">0</span></p>
        </div>
        <p id="computer-guess">?</p>
        <p class="winning-text" id="computer-wins"></p>
      </div>
      <div class="guess human-guess">
        <div class="guess-title">
          <p class="guess-label">You</p>
          <p class="score-label">Score: <span id="human-score">0</span></p>
        </div>
        <input type="number" id="human-guess" min=0 max=9 value=0>
        <div class="number-controls">
          <button class="number-control left" id="subtract" disabled>-</button>
          <button class="number-control right" id="add"> </button>
        </div>
        <button class="button" id="guess">Make a Guess</button>
      </div>
    </div>

    <div class="next-round-container">
      <button class="button" id="next-round" disabled>Next Round</button>
    </div>

  </div>

  <div class="instructions">
    <div class="instruction">
      <h3>Step 1</h3>
      <p>Input a number between 0 and 9</p>
    </div>
    <div class="instruction">
      <h3>Step 2</h3>
      <p>Click "Make a Guess" to submit your guess and see who won the round.</p>
    </div>
    <div class="instruction">
      <h3>Step 3</h3>
      <p>Click "Next Round" to play again.</p>
    </div>
  </div>

  <script src="./script.js"></script>
  <script src="./game.js"></script>
</body>

</html>

Комментарии:

1. Опечатка: Math.random должно быть Math.random()

2. Вы также можете захотеть преобразовать в целое число, иначе у игрока практически нет шансов угадать все цифры после десятичной точки.

3. Спасибо!! @Бармар

Метки: