JavaScript 事件未響應點擊

Question

 const count = document.querySelector("#count") const btns = document.querySelectorAll("#btn") let value = 0 btns.forEach(function(btn){ btn.addEventListener('click', function(e){ const styles = e.currentTarget.classList if(styles.contains("increase")){ value++ } else if(styles.contains("decrease")){ value-- } else { value = 0 } if(count > 0){ count.styles.color = "green" } if(count < 0){ count.styles.color = "red" } if(count === 0){ count.styles.color = "black" } count.textContent = value }) }) // here I am trying to get button clicks but nothing is happening, not even console logs popup

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <body> <div class="container"> <h1>Counter</h1> <p id="value">0</p> <button id="btn decrease">Decrease</button> <button id="btn reset">Reset</button> <button id="btn increase">Increase</button> </div> <script src="index.js"></script> </body> </html>

該事件不起作用，也許我忘了添加一些東西？

Answer 1

編輯：做了幾個改變

您有document.querySelector("#count")但在 html 中您使用的是 id="value"。

正如@Ivar 指出的那樣，id 應該是唯一的，因此在這種情況下最好使用 class 。 因此將所有內容更改為 class。 而且您的 if 正在檢查count ，即 html 元素而不是value ，這就是計數着色不起作用的原因。

 const count = document.querySelector("#count") const btns = document.querySelectorAll(".btn") let value = 0 btns.forEach(function(btn){ btn.addEventListener('click', function(e){ const styles = e.currentTarget.classList if(styles.contains("increase")){ value++ } else if(styles.contains("decrease")){ value-- } else { value = 0 } if(value > 0){ // changed count.style.color = "green" } if(value < 0){ // changed count.style.color = "red" } if(value === 0){ // changed count.style.color = "black" } count.textContent = value }) })

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <body> <div class="container"> <h1>Counter</h1> <p id="count">0</p><!--changed--> <button class="btn decrease">Decrease</button><!--changed--> <button class="btn reset">Reset</button><!--changed--> <button class="btn increase">Increase</button><!--changed--> </div> <script src="index.js"></script> </body> </html>

Answer 2

您的腳本中有一些問題：

我用class="btn decrease" reduction" 替換了id="btn decrease" reduction"，因為element.classList顯然只適用於 class 屬性。
你的條件if (count > 0)...應該是if (value > 0)...
沒有元素屬性styles ，請改用style 。

 const count = document.querySelector("#value"); const btns = document.querySelectorAll(".btn") let value = 0 btns.forEach(function(btn){ btn.addEventListener('click', function(e){ const styles = e.currentTarget.classList if(styles.contains("increase")){ value++ } else if(styles.contains("decrease")){ value-- } else { value = 0 } if(value > 0){ count.style.color = "green" } else if(value < 0){ count.style.color = "red" } else { count.style.color = "black" } count.textContent = value }) })

 <div class="container"> <h1>Counter</h1> <p id="value">0</p> <button class="btn decrease">Decrease</button> <button class="btn reset">Reset</button> <button class="btn increase">Increase</button> </div>

通過避免重復，可以大大縮短整個腳本：

 const count = document.querySelector("#value"); document.querySelectorAll(".container button").forEach(function(btn,i){ btn.addEventListener('click', (e)=>{ let val=+count.textContent; val = i===1? 0: val+(i?+1:-1) count.textContent = val count.style.color = val>0?"green":val<0?"red":"black"; }); })

 <div class="container"> <h1>Counter</h1> <p id="value">0</p> <button>Decrease</button> <button>Reset</button> <button>Increase</button> </div>

JavaScript 事件未響應點擊

問題描述

2 個解決方案

解決方案1
3 已采納 2021-05-15 15:07:19

解決方案2
1 2021-05-15 15:01:27

JavaScript 事件未響應點擊

問題描述

2 個解決方案

解決方案1 3 已采納 2021-05-15 15:07:19

解決方案2 1 2021-05-15 15:01:27

解決方案1
3 已采納 2021-05-15 15:07:19

解決方案2
1 2021-05-15 15:01:27