Question

我有三个函数，全部包含contents.innerHTML = 'some HTML';。

这些函数用于在调用时使用内容ID重写div的innerHTML。

导航栏上还有三个按钮，分别在每个功能innerHTML的顶部指定。例如，调用函数时，按钮本身也将与HTML的其余部分一起重写。

这些按钮每个都有各自独立的ID，因此在JS文件中每个按钮都有一个document.getElementById('button-id');。

然后我使用以下事件调用每个函数：

buttonName.addEventListener('click', () => {
  functionCall();
});

我的问题是我的按钮只能使用一次。单击其中任何一个后，它们将不再起作用。我觉得原因是盯着我，但我看不见。

HTML：

<main>
    <div id="content"></div>
</main>

JS：

const displayUser = () => {
  content.innerHTML = `
  <div class="nav-panel">
    <a class="nav-div-l nav-pic-bg hover"><img class="nav-pic-l nav-img" src="${img.arrows[2]}" alt="Logout Arrow">
    <h2 id="logout-btn">Back</h2></a>
    <a id="user-btn" class="nav-div-c hover"><img class="nav-pic-c nav-img" src="${img.user[0]}" alt="User Picture">
    <h2>Username</h2></a>
    <a id="settings-btn" class="nav-div-r hover hide-mobile"><h2>Settings</h2>
    <img class="nav-pic-r nav-img settings-img" src="${img.symbols[2]}" alt="Settings Cog"></a>
    <a class="settings-btn hide-desktop"><img class="nav-img" src="${img.symbols[2]}" alt="Settings Cog"></a>
  </div>

  --- MORE NON NAV RELATED HTML ---
  `;
};

就导航HTML而言，这三个函数看起来都与此完全相同。

displayLists(); // load page with displayLists

const logoutBtn = document.getElementById('logout-btn'); // nav links
const userBtn = document.getElementById('user-btn');
const settingsBtn = document.getElementById('settings-btn');

logoutBtn.addEventListener('click', () => {
  displayLists()
}); // change to lists page

userBtn.addEventListener('click', () => {
  displayUser()
}); // change to user page

settingsBtn.addEventListener('click', () => {
  displaySettings()
}); // change to settings page

为什么我的`addEventListen`按钮只能工作一次？

0 个答案: