javascript - GET http://localhost:8080/undefined 404 - 动态添加html时

Question

在我的迷宫游戏应用程序（使用 vanilla JS 创建）中，我动态删除然后添加一个“用户输入”弹出框，允许用户选择他们想要的角色并输入他们的名字。“用户输入”弹出框在 HTML 中进行了硬编码，因此当应用首次加载时，它会立即出现在 UI 上。

一旦用户选择了他们的角色，输入了他们的名字，并按下了“开始游戏”按钮，弹出框 HTML 就会使用“removeChild”从 DOM 中移除。

用户完成迷宫后，会显示一个“排行榜”弹出框，其中包含“再次播放”按钮。当用户点击该按钮时，“排行榜”弹出框从 DOM 中移除，再次显示“用户输入”弹出框。

我遇到的问题是，当用户单击“再次播放”按钮时显示“用户输入”弹出框时，出现错误“GET http://localhost:8080/undefined 404”控制台，我无法选择角色或开始另一场游戏。

我有一种感觉，这可能与我使用 Webpack 捆绑代码的事实有关，因为当单击“再次播放”按钮时，页面不会重新加载，并且 HTML 已从 DOM 中删除然后再次添加，这以某种方式导致错误？

这是相关的html：

<div class="container">
  //THE BELOW PART OF THIS CODE IS REMOVED FROM THE DOM
  <div class="users-input animated slideInUp">
    <div class="users-name">
      <input
        class="users-name-input"
        type="text"
        name="Name"
        placeholder="Enter Name"
        required
      />
    </div>
    <div class="select-character-text">
      <p>Select Character</p>
    </div>
    <div class="character-select">
      <ion-icon class="left" name="arrow-dropleft-circle"></ion-icon>
      <ion-icon class="right" name="arrow-dropright-circle"></ion-icon>
      <img class="character-img trump" src="images/trump.png" />
    </div>
    <div class="start-button-container">
      <input class="start-button" type="button" value="START" />
    </div>
  </div>
//THE ABOVE PART OF THIS CODE IS REMOVED FROM THE DOM
</div>

这是gameView.js文件中的相关代码：

const popUpContainer = document.querySelector(".container");

export const renderUsersInput = () => {
  let html = ` <div class="users-input animated slideInUp">
        <div class="users-name">
            <input class="users-name-input" type="text" name="Name" placeholder="Enter Name" required>
        </div>
        <div class="select-character-text">
            <p>Select Character</p>
        </div>
        <div class="character-select">
            <ion-icon class="left" name="arrow-dropleft-circle"></ion-icon>
            <ion-icon class="right" name="arrow-dropright-circle"></ion-icon>
            <img class="character-img trump" src="images/trump.png">
        </div>
        <div class="start-button-container">
            <input class="start-button" type="button" value="START">
        </div>
    </div> `;

  popUpContainer.insertAdjacentHTML("beforeend", html);
};

export const removeUsersInput = () => {
  const usersInput = document.querySelector(".users-input");
  usersInput.parentElement.removeChild(usersInput);
};

上面的 removeUsersInput 方法在我的应用程序（index.js）的主控制器中调用：

const ctrlStartGame = () => {
  gameView.removeUsersInput();
};

这附加到事件侦听器：

base.elements.startButton.addEventListener("click", ctrlStartGame);

renderUsersInput 方法附​​加到此事件侦听器：

base.elements.leaderBoardContainer.addEventListener("click", (e) => {
    const newElements = base.getNewElements();
    if(e.target === newElements.playAgainBtn) {
        gameView.removeLeaderBoard();
        gameView.renderUsersInput();       
}

标签： javascriptwebpack