Я не могу понять, почему счетчик работает на одной кнопке, а не на другой

Question

Я совершенно новичок в Javascript и JQuery, и я не могу понять, почему счетчик увеличивается для одной кнопки, но тот же код не работает для других. Любая помощь будет принята с благодарностью. Спасибо!

// JAVASCRIPT/JQUERY (to increment by 1)
let addRoom = document.querySelector(".addRoom");
let subtractRoom = document.querySelector(".subtractRoom");
let input = document.querySelector(".roomsAmmount");

addRoom.addEventListener('click', () => {
  input.value = parseInt(input.value) + 1;
});

subtractRoom.addEventListener('click', () => {
  input.value = parseInt(input.value) - 1;
});

/*.addRoom,.subtractRoom{position:absolute;font-size:1.3em;width:50%;height:45px;z-index:1;display:flex}.roomsAmmount{position:absolute;width:50px;height:45px;right:-60px;border:none;border-bottom:1px solid #f4b494;outline:0;font-size:1.4em;text-align:center;background-color:transparent;color:#fff}
*/

<div class="bedroomsButton">Bedrooms
  <div class="addRoom">
    <span class="plusOne">+</span>
  </div>
  <div class="subtractRoom">
    <span class="subtractOne">-</span>
  </div>
  <input class="roomsAmmount" type="number" value="0">
</div>

<div class="bathroomsButton">Bathrooms
  <div class="addRoom">
    <span class="plusOne">+</span>
  </div>
  <div class="subtractRoom">
    <span class="subtractOne">-</span>
  </div>
  <input class="roomsAmmount" type="number" value="0">
</div>

Answer 1

Document.querySelector ()

Метод Document querySelector() возвращает первый элемент в документе, который соответствует указанному селектору или группе селекторов

Вы можете выбрать все элементы с помощью querySelectorAll(), затем l oop через них, используя forEach(), чтобы присоединить обработчик событий.

// JAVASCRIPT/JQUERY (to increment by 1)
let addRoom = document.querySelectorAll(".addRoom");
let subtractRoom = document.querySelectorAll(".subtractRoom");

addRoom.forEach((el)=>{
  el.addEventListener('click', (e) => {
    let input = e.target.closest('.bedroomsButton,.bathroomsButton').querySelector(".roomsAmmount");
    input.value = parseInt(input.value) + 1;
  });
});

subtractRoom.forEach((el)=>{
  el.addEventListener('click', (e) => {
    let input = e.target.closest('.bedroomsButton,.bathroomsButton').querySelector(".roomsAmmount");
    input.value = parseInt(input.value) - 1;
  });
});

<div class="bedroomsButton">Bedrooms
  <div class="addRoom">
    <span class="plusOne">+</span>
  </div>
  <div class="subtractRoom">
    <span class="subtractOne">-</span>
  </div>
  <input class="roomsAmmount" type="number" value="0">
</div>

<div class="bathroomsButton">Bathrooms
  <div class="addRoom">
    <span class="plusOne">+</span>
  </div>
  <div class="subtractRoom">
    <span class="subtractOne">-</span>
  </div>
  <input class="roomsAmmount" type="number" value="0">
</div>

Answer 2

Как сказано в комментарии, document.querySelector возвращает только первый элемент или ноль.

Сделайте так:

let addRoom = document.querySelectorAll(".addRoom");
let subtractRoom = document.querySelectorAll(".subtractRoom");

addRoom.forEach(btn => {
    setInputValue(btn, true)
  }
)

subtractRoom.forEach(btn => {
    setInputValue(btn, false)
  }
)

function setInputValue(btn, plus) {
  const input = btn.parentNode.querySelector('input')
  btn.addEventListener('click', () => {
    const originalValue = parseInt(input.value)
    input.value = String(plus ? originalValue + 1 : originalValue - 1)
  });
}

Answer 3

добавить класс clickable к каждому + и -

выбрать все clickable и добавить прослушиватель событий для каждого элемента

document.querySelectorAll(`.clickable`).forEach(el => el.addEventListener(`click`, handleClick))

handleClick функция выглядит следующим образом

const handleClick = (e) => {

  // selecting a closest input
  const input = e.target.parentElement.parentElement.querySelector(".roomsAmmount");

  // parsing value 
  let newValue = parseInt(input.value);

  // if clicked element has class plusOne
  if (e.target.classList.contains(`plusOne`)) {
    newValue++; // increase
  }

  // if clicked element has class subtractOne
  if (e.target.classList.contains(`subtractOne`)) {
    newValue--; // decrease
  }

  // update value
  input.value = newValue;

}

рабочий пример https://jsfiddle.net/yqp5zx1b/1/