Interactive comments using CSS, a bit of bootstrap and Javascript/jque

Community feedback

• 

  Adarsh•1,640

  @adram3l3chPosted almost 3 years ago

  <div class="counter">
    <button class="plus">+</button>
    <h2 class="value">0</h2>
    <button class="minus">-</button>
  </div>
  
  <div class="counter">
    <button class="plus">+</button>
    <h2 class="value">0</h2>
    <button class="minus">-</button>
  </div>
  
  
  document.querySelectorAll(".plus").forEach((item) => {
    item.addEventListener("click", () => {
      const valueElement = item.parentNode.querySelector(".value");
      valueElement.textContent = +valueElement.textContent + 1;
    });
  });
  
  document.querySelectorAll(".minus").forEach((item) => {
    item.addEventListener("click", () => {
      const valueElement = item.parentNode.querySelector(".value");
      valueElement.textContent = +valueElement.textContent - 1;
    });
  });
  

  can't you just update the upvote like this. add event listener on each plus and minus button. when event is occurred select its parent and increase values inside it

  Marked as helpful

  0

  ---

  

  Matthew•50

  @WashemjPosted almost 3 years ago

  @adram3l3ch Thanks for the reply! Yeh I guess you could, though doesnt the second const 'valueElement' not work cause it can only be defined once?

  1

  

  Adarsh•1,640

  @adram3l3chPosted almost 3 years ago

  @Washemj Nop. Those are in different scopes means different functions. The first const valueElement can't be accessed from the second callback

  1