Почему этот Javascript код не увеличивается на 1?

Question

У меня есть код, который когда-то хорошо работал для увеличения и уменьшения входного значения на 1 при нажатии кнопок + или -. Я изменил несколько вещей (с точки зрения дизайна), но больше не могу ориентироваться на ввод. Любая помощь будет великолепна!

HTML КОД

    addRoom.forEach((el) => {
        el.addEventListener("click", (e) => {
            let input = e.target("#addRoom").querySelector("#rooms_amount");
            input.value = parseInt(input.value) + 1;
        });
    });

    subtractRoom.forEach((el) => {
        el.addEventListener("click", (e) => {
            let input = e.target.closest("#subtractRoom").querySelector("#rooms_amount");
            input.value = parseInt(input.value) - 1;

        });
    });

<div id="center_counters_wrap">
        <small class="smallTitle">Bedrooms</small>
        <div id="bedrooms_counter_wrap">

            <div class="roomsWrap">
                <div class="data-increase" id="addRoom">+</div>
                <div id="subtractRoom">-</div>
                <input class="data-value" id="rooms_amount" value="0" placeholder="0" type="number" autocomplete="off"
                    placeholder="0" required>

            </div>


        </div>

        <small class="smallTitle">Bathrooms</small>
        <div id="bedrooms_counter_wrap">
            <div class="roomsWrap">
                <div id="addRoom">+</div>
                <div id="subtractRoom">-</div>
                <input id="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

            </div>


        </div>

        <small class="smallTitle">Kitchens</small>
        <div id="bedrooms_counter_wrap">
            <div class="roomsWrap">
                <div id="addRoom">+</div>
                <div id="subtractRoom">-</div>
                <input id="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

            </div>

Answer 1

Есть несколько ошибок.

1. Вы используете одинаковые id для всех + & -. идентификатор должен быть уникальным. В этом случае вы можете использовать класс.
2. Во-вторых, вы используете closest, который перемещается вверх к родителю. Так что только с ближайшим вы не можете получить вход. В этом случае вы можете использовать parent или closest, а затем использовать querySelector, чтобы найти ввод

document.querySelectorAll('.addRoom').forEach((el) => {
  el.addEventListener("click", (e) => {
    let input = e.target.parentNode.querySelector(".rooms_amount");
    input.value = parseInt(input.value) + 1;
  });
});

document.querySelectorAll('.subtractRoom').forEach((el) => {
  el.addEventListener("click", (e) => {
    let input = e.target.parentNode.querySelector(".rooms_amount");
    input.value = parseInt(input.value) - 1;

  });
});

.addRoom,
.subtractRoom {
  cursor: pointer;
}

.addRoom {
  color: green;
}

.subtractRoom {
  color: red;
}

.addRoom:hover,
.subtractRoom:hover {
  font-size: 20px;
}

<div id="center_counters_wrap">
  <small class="smallTitle">Bedrooms</small>
  <div id="bedrooms_counter_wrap">

    <div class="roomsWrap">
      <div class="data-increase addRoom">+</div>
      <div class="subtractRoom">-</div>
      <input class="rooms_amount" value="0" placeholder="0" type="number" autocomplete="off" placeholder="0" required>

    </div>


  </div>

  <small class="smallTitle">Bathrooms</small>
  <div id="bedrooms_counter_wrap">
    <div class="roomsWrap">
      <div class="addRoom">+</div>
      <div class="subtractRoom">-</div>
      <input class="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

    </div>


  </div>

  <small class="smallTitle">Kitchens</small>
  <div id="bedrooms_counter_wrap">
    <div class="roomsWrap">
      <div class="addRoom">+</div>
      <div class="subtractRoom">-</div>
      <input class="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

    </div>

Answer 2

Прежде всего, вы не можете иметь несколько идентификаторов в своей DOM, измените свои входные идентификаторы на классы и найдите вход, перейдя к первому parentElement, а затем выберите вход этого родительского элемента.

Аналогично измените свой addRoom и substractRoom также для классов, чтобы вы могли правильно найти их в своей DOM через querySelectorAll, после этого вы можете легко l oop через них и назначить eventListeners каждому из ваших +/- узлов.

* 1004 Кроме того, поиск ближайшего элемента может привести к ошибкам при добавлении кода, поэтому лучше полагаться на классы. Найдите входные данные с помощью querySelector и выполните поиск по заданному классу.

document.querySelectorAll('.addRoom').forEach((el) => {
  el.addEventListener("click", (e) => {
    let input = e.target.parentNode.querySelector('.rooms_amount')
    input.value = parseInt(input.value) + 1;
  });
});

document.querySelectorAll('.substractRoom').forEach((el) => {
  el.addEventListener("click", (e) => {
    let input = e.target.parentNode.querySelector('.rooms_amount')
    input.value = parseInt(input.value) - 1;

  });
});

<div id="center_counters_wrap">
  <small class="smallTitle">Bedrooms</small>
  <div id="bedrooms_counter_wrap">

    <div class="roomsWrap">
      <div class="addRoom" class="data-increase">+</div>
      <div class="substractRoom">-</div>
      <input class="rooms_amount" value="0" placeholder="0" type="number" autocomplete="off" placeholder="0" required>

    </div>


  </div>

  <small class="smallTitle">Bathrooms</small>
  <div id="bedrooms_counter_wrap">
    <div class="roomsWrap">
      <div class="addRoom">+</div>
      <div class="substractRoom">-</div>
      <input class="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>
    </div>
  </div>

  <small class="smallTitle">Kitchens</small>
  <div id="bedrooms_counter_wrap">
    <div class="roomsWrap">
      <div class="addRoom">+</div>
      <div class="substractRoom">-</div>
      <input class="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

    </div>
  </div>
</div>

Answer 3

Атрибут id должен быть уникальным в документе, используйте class атрибут вместо. Вы также должны нацелить ближайший элемент .roomsWrap и найти элемент .rooms_amount , чтобы обновить значение.

Попробуйте выполнить следующее:

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

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

subtractRoom.forEach((el) => {
  el.addEventListener("click", (e) => {
      let input = e.target.closest(".roomsWrap").querySelector(".rooms_amount");
      input.value = parseInt(input.value) - 1;

  });
});

<div id="center_counters_wrap">
  <small class="smallTitle">Bedrooms</small>
  <div id="bedrooms_counter_wrap">

      <div class="roomsWrap">
          <div class="addRoom data-increase">+</div>
          <div class="subtractRoom">-</div>
          <input class="data-value rooms_amount" value="0" placeholder="0" type="number" autocomplete="off"
              placeholder="0" required>

      </div>


  </div>

  <small class="smallTitle">Bathrooms</small>
  <div id="bedrooms_counter_wrap">
      <div class="roomsWrap">
          <div class="addRoom">+</div>
          <div class="subtractRoom">-</div>
          <input class="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

      </div>


  </div>

  <small class="smallTitle">Kitchens</small>
  <div id="bedrooms_counter_wrap">
      <div class="roomsWrap">
          <div class="addRoom">+</div>
          <div class="subtractRoom">-</div>
          <input class="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

      </div>

Answer 4

  const addRoom = document.querySelectorAll("#addRoom");
  const subtractRoom = document.querySelectorAll("#subtractRoom");
  addRoom.forEach((el) => {
        el.addEventListener("click", (e) => {
            let input = e.target.closest(".roomsWrap").querySelector("#rooms_amount");
            input.value = parseInt(input.value) + 1;
        });
    });

    subtractRoom.forEach((el) => {
        el.addEventListener("click", (e) => {
            let input = e.target.closest(".roomsWrap").querySelector("#rooms_amount");
            input.value = parseInt(input.value) - 1;

        });
    });

<div id="center_counters_wrap">
        <small class="smallTitle">Bedrooms</small>
        <div id="bedrooms_counter_wrap">

            <div class="roomsWrap">
                <div class="data-increase" id="addRoom">+</div>
                <div id="subtractRoom">-</div>
                <input class="data-value" id="rooms_amount" value="0" placeholder="0" type="number" autocomplete="off"
                    placeholder="0" required>

            </div>


        </div>

        <small class="smallTitle">Bathrooms</small>
        <div id="bedrooms_counter_wrap">
            <div class="roomsWrap">
                <div id="addRoom">+</div>
                <div id="subtractRoom">-</div>
                <input id="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

            </div>


        </div>

        <small class="smallTitle">Kitchens</small>
        <div id="bedrooms_counter_wrap">
            <div class="roomsWrap">
                <div id="addRoom">+</div>
                <div id="subtractRoom">-</div>
                <input id="rooms_amount" value="0" type="number" autocomplete="off" placeholder="0" required>

            </div>