个人中心
gpt4 book ai didi

JavaScript 单击 addEventListener 无法处理我的代码

转载 作者：行者123 更新时间：2023-11-30 11:15:40 26 4
gpt4 key购买 nike

我正在尝试让 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>

我知道我可以使用 jQuery 来做到这一点，但我只想使用纯 vanilla JavaScript 来做到这一点。

当我点击 #trigger 时，#box 文本没有改变。我做错了什么？

最佳答案

为了仅运行您的代码，当 DOM完全加载和解析，在 DOMContentLoaded 下添加一个 evenet 监听器事件，然后使用 querySelector选择具有 #trigger id 的元素，然后向其添加一个 click 事件监听器并再次使用 querySelector 来选择具有 的元素>#box id 并相应地修改其 .innerHTML:

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

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

示例:

<!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('DOMContentLoaded', () => {
      document.querySelector("#trigger").addEventListener('click', () => {
        document.querySelector("#box").innerHTML = "New Box Text";
      });
    });
  </script>
</body>
</html>

关于JavaScript 单击 addEventListener 无法处理我的代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51662595/

26 4 0
文章推荐： ios - 无法让 UIButton 调用 Swift 4 中的代码块
文章推荐： ios - 以编程方式扩展 ScrollView 的高度
文章推荐： 没有条件的Javascript递归
文章推荐： javascript - 扩展 HTMLElement 原型(prototype)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com