Слушатель событий не нажимает на вторую кнопку в DIV

Question

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

const startBtn = document.getElementById('start');
const restartBtn = document.getElementById('restart');
const formContainer = document.getElementById('input-container');

startBtn.addEventListener('click', (e) => {
  e.preventDefault();
  formContainer.classList.replace('hidden', 'visible');
});

restartBtn.addEventListener('click', (e) => {
  e.preventDefault();
  resetGame();
});

const resetGame = () => {
  players = [];
  playerShips = [];
  computerShips = [];
  gameboard.playerArea = new Array(100).fill(false);
  gameboard.computerArea = new Array(100).fill(false);
  playerInterface.innerHTML = '';
  computerInterface.innerHTML = '';
  formContainer.classList.replace('hidden', 'visible');
};

.wrapper {
  position: absolute;
  padding: 30px;
  width: 30%;
}

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="wrapper">
  <div id="start-area fade-in">
    <h1>BATTLESHIP</h1>
    <p>Start the game below!</p>

    <button id="start" class="visible btn">Start Game</button>
    <button id="restart" class="hidden btn">Restart Game</button>
  </div>

  <div id="input-container" class="hidden">
    <form id="user-form">
      <input type="text" placeholder="Enter player name" id="form-input" name="name">
      <button type="submit" id="user-submit">Submit</button>
    </form>
  </div>

</div>

При нажатии кнопки id='restart' должна запускаться показанная выше функция resetGame (эта функция существует в модуле gameflow в другом файле).

Answer 1

Объект gameflow с методом resetGame() не существует. Поэтому строка gameflow.resetGame(); выдает исключение. Замените строку на resetGame();, и функция будет вызвана.

Обратите внимание, что следующие объекты тоже не определены:

• gameboard;
• playerInterface;
• computerInterface.

Исправьте ошибки, и это должно сработать.

Если вы утверждаете, что метод gameflow.resetGame() определен в другом файле, убедитесь, что файл включен (см. src атрибут элемента script) на страницу, загружен и метод доступен. Чтобы проверить метод, откройте консоль браузера и попробуйте вызвать его.

Answer 2

Бит e.preventDefault() в основном только для кнопок отправки. Попробуйте убрать это из своих обычных кнопок.