JavaScript單擊addEventListener不能處理我的代碼

Question

我試圖讓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做到這一點，但我想用純粹的，普通的JavaScript做到這一點。

當我點擊#trigger ， #box文本沒有改變。 我做錯了什么？

Answer 1

為了僅運行代碼，當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>

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 個解決方案

解決方案1
2 已采納 2018-08-02 21:58:03

解決方案2
1 2018-08-02 21:53:00

JavaScript單擊addEventListener不能處理我的代碼

問題描述

2 個解決方案

解決方案1 2 已采納 2018-08-02 21:58:03

解決方案2 1 2018-08-02 21:53:00

解決方案1
2 已采納 2018-08-02 21:58:03

解決方案2
1 2018-08-02 21:53:00