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>

The event is not working, perhaps I forgot to add something?该事件不起作用，也许我忘了添加一些东西？

Answer 1

EDIT: made couple of changes编辑：做了几个改变

You have document.querySelector("#count") but in html you are using id="value".您有document.querySelector("#count")但在 html 中您使用的是 id="value"。

As @Ivar pointed out ids should be unique so its better to use class for this case.正如@Ivar 指出的那样，id 应该是唯一的，因此在这种情况下最好使用 class 。 So changed everything to class.因此将所有内容更改为 class。 And your if is checking on count which is html element and not on the value , thats why the count coloring was not working.而且您的 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

There were a few issues in your script:您的脚本中有一些问题：

I replaced id="btn decrease" with class="btn decrease" as the element.classList clearly only works on the class attribute.我用class="btn decrease" reduction" 替换了id="btn decrease" reduction"，因为element.classList显然只适用于 class 属性。
your condition if (count > 0)... should be if (value > 0)...你的条件if (count > 0)...应该是if (value > 0)...
there is no element-attribute styles , use style instead.没有元素属性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>

The whole script could be shortened quite a bit by avoiding repetitions:通过避免重复，可以大大缩短整个脚本：

 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