Buttons are not working properly with addEventListener

Question

I have tried the answers given on the similar questions but I really can't do this one and I actually have no idea what I am supposed to do which is why I made this new question. The respective counter is supposed increase by one each time the respective countUp button is clicked. But now, I got NaN in both counter when I click on the first countUp button. Could you please help? Thank you.

const countUp = document.querySelectorAll('.countUp')
const countDown = document.querySelector('.countDown')
const counter = document.querySelectorAll('.num')
let count = counter.textContent

countUp.forEach((countUp) => {
  countUp.addEventListener('click', () => {
    counter.forEach((countUp) => {
      count++
      countUp.innerHTML = count
    })
  })
});

<div class="rating">
  <button class="countUp">+</button>
  <span class="num">0</span>
  <button class="countDown">-</button>
</div>
<div class="rating">
  <button class="countUp">+</button>
  <span class="num">0</span>
  <button class="countDown">-</button>
</div>

See `counter` - `querySelectorAll` returns a collection, not an element - using `counter.textContent` doesn't make sense. From the clicked element, navigate to the adjacent span with `.nextElementSibling` to get to the element whose text you want to change. If you were to use `querySelectorAll`, use the index (second argument) to identify the associated `counter` element. (Also consider giving your variables more intuitive names; shadowing `countUp` everywhere is making things very confusing, as is the singular `counter` variable name) — CertainPerformance, Nov 12 '22 at 15:34

mplungjan · Answer 1 · 2022-11-26T19:42:16.723

You cannot access the relative span using querySelectorAll. It returns a collection

If you delegate and navigate relatively among siblings, you can save a lot of code and headaches

const container = document.getElementById("container");
container.addEventListener('click', (e) => {
  const tgt = e.target.closest("button"); 
  if (!tgt) return; //  or use e.target and test tgt.matches("button")
  const numSpan = tgt.closest(".rating").querySelector(".num");
  if (numSpan.matches(".clicked")) return; // already clicked
  numSpan.classList.add("clicked");
  let num = +numSpan.textContent;
  num += tgt.classList.contains("countUp") ? 1 : -1;
  numSpan.textContent = num;
});

<div id="container">
  <div class="rating">
    <button class="countUp">+</button>
    <span class="num">1</span>
    <button class="countDown">-</button>
  </div>
  <div class="rating">
    <button class="countUp">+</button>
    <span class="num">0</span>
    <button class="countDown">-</button>
  </div>
</div>

I am very sorry for my late reply. What if I wanted to increase and decrease the number by one only one time when the related button is clicked. For example, lets say the original number is 1. When I click (+), it increases to 2. Then I cannot click(+) anymore. Then When I click (-), it decreases to 0. Then I cannot click(-) anymore. How can I go about this? Thank you for your time. — saddysad, Nov 26 '22 at 05:43
I added a class. but why not use a radio or some other type of input to handle this? — mplungjan, Nov 26 '22 at 19:44

Buttons are not working properly with addEventListener

1 Answers1