JavaScript event not responding to clicks

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".

As @Ivar pointed out ids should be unique so its better to use class for this case. So changed everything to 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.

 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.
your condition if (count > 0)... should be if (value > 0)...
there is no element-attribute styles , use style instead.

 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 event not responding to clicks

Question

2 answers

solution1
3 ACCPTED 2021-05-15 15:07:19

solution2
1 2021-05-15 15:01:27

JavaScript event not responding to clicks

Question

2 answers

solution1 3 ACCPTED 2021-05-15 15:07:19

solution2 1 2021-05-15 15:01:27

solution1
3 ACCPTED 2021-05-15 15:07:19

solution2
1 2021-05-15 15:01:27