Question

我正在尝试使JavaScript侦听器正常工作，但没有任何变化。

这是完整的代码：

14:44:44 - error: Compiling of js/components/Accordion/Accordion.jsx failed. L22:15 Unexpected token 
     20 |     };
     21 |   }
   > 22 |   handleChange = panel => (event, expanded) => {
        |                ^
     23 |     this.setState({
     24 |       active: expanded ? panel : -1
     25 |     });

我知道我可以使用jQuery来做到这一点，但我只想使用纯净的原始JavaScript来实现。

当我点击<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #trigger { padding: 20px; background-color: red; border: 1px solid white; width: 100px; cursor: pointer; } #box { padding: 20px; background-color: green; border: 1px solid white; width: 100px; cursor: pointer; } </style> </head> <body> <div id="trigger">Click Here</div> <div id="box"> content should change </div> <script type="text/javascript"> document.addEventListener("click", () => { document.getElementById("trigger"), () => { document.getElementById("box").innerHTML = "New Box Text"; } }); </script> </body> </html>时，#trigger的文字没有改变。我在做什么错了？

Answer 1

为了仅运行您的代码，当DOM完全加载并解析后，请在DOMContentLoaded事件下添加一个事件侦听器，然后使用querySelector选择带有{ {1}} ID，然后向其添加#trigger事件监听器，并再次使用click选择ID为querySelector的元素，并相应地修改其#box：

.innerHTML

使用querySelector和querySelectorAll的好处是，在选择元素时，它们提供了与jQuery相似的功能。

示例：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector("#trigger").addEventListener('click', () => {
    document.querySelector("#box").innerHTML = "New Box Text";
  });
});

Answer 2

将侦听器添加到box元素而不是整个页面：

document.getElementById("trigger").addEventListener("click", () =>
  document.getElementById("box").innerHTML = "New Box Text"
);

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>

  <style type="text/css">
    #trigger {
        padding: 20px;
        background-color: red;
        border:1px solid white;
        width: 100px;
        cursor: pointer;
    }

    #box {
        padding: 20px;
        background-color: green;
        border:1px solid white;
        width: 100px;
        cursor: pointer;
    }
  </style>

</head>

<body>

<div id="trigger">Click Here</div>
<div id="box">
    content should change
</div>

</body>
</html>

JavaScript单击addEventListener对我的代码不起作用

2 个答案: