Question

我正在尝试向组件添加一个eventListener，但这会破坏我的应用程序...

import "./button.scss";

document.getElementById('change-theme-btn').addEventListener('click', function () {
   document.body.classList.toggle('pink-background');
});

const button = '<button id="change-theme-btn">Button</button>';

export default button;

Answer 1

您不能将侦听器添加到不在DOM中的DOM节点。您应该具有无法调用null的addEventListener的错误，因为getElementById将找不到该按钮。要解决此问题，您可以使用事件委托：

y_true

Answer 2

我敢肯定，在按钮真正出现在页面上之前，您甚至添加了正在运行的侦听器。我建议将其放在函数中，然后单击引用该函数的按钮。见下文。

import "./button.scss";
window.buttonClick = function(e) {
  document.body.classList.toggle('pink-background');
};

const button = '<button onclick="buttonClick()" id="change-theme-btn">Button</button>';

export default button;

尝试将eventListener添加到组件，但它破坏了我的应用程序

2 个答案: