Почему скрипт работает только на первом элементе?

Question

[vladislav198712]

Всем привет! Есть вот такой код, для умножения количества на сумму товара в модальном окне

let qty = document.querySelector('.quantity');
let amount = document.querySelector('.price-amount').firstChild;
let price = +amount.textContent;
qty.addEventListener('input', () => amount.textContent = qty.value*price);

$(function() {

  (function quantityProducts() {
    var $quantityArrowMinus = $(".quantity-arrow-minus");
    var $quantityArrowPlus = $(".quantity-arrow-plus");
    var $quantityNum = $(".quantity-num");

    $quantityArrowMinus.click(quantityMinus);
    $quantityArrowPlus.click(quantityPlus);

    function quantityMinus() {
      if ($quantityNum.val() > 1) {
        $quantityNum.val(+$quantityNum.val() - 1);
      }
    }

    function quantityPlus() {
      $quantityNum.val(+$quantityNum.val() + 1);
    }
  })();

});

В input с количеством товара добавляю класс - quantity
В span с ценой товара добавляю класс - price-amount

Скрипт отлично отрабатывает только на первом модальном окне, на остальные он не реагирует. Почитал в гугле, понял что js возвращает лишь первый элемент, подпадающий под условие. Можно ли это как-то исправить?

Answer 1

[imko]

Можно

Comments

[TtT RrR]

Тогда во всех элементах будет прибавление

[Stalker_RED]

TtT RrR, как напишете, так и будет.

[vladislav198712]

Попробовал добавить querySelectorAll, теперь первый элемент не работает, и все остальные так же

let qty = document.querySelectorAll('.quantity');
let amount = document.querySelectorAll('.price-amount').firstChild;
let price = +amount.textContent;
qty.addEventListener('input', () => amount.textContent = qty.value*price);

$(function() {

  (function quantityProducts() {
    var $quantityArrowMinus = $(".quantity-arrow-minus");
    var $quantityArrowPlus = $(".quantity-arrow-plus");
    var $quantityNum = $(".quantity-num");

    $quantityArrowMinus.click(quantityMinus);
    $quantityArrowPlus.click(quantityPlus);

    function quantityMinus() {
      if ($quantityNum.val() > 1) {
        $quantityNum.val(+$quantityNum.val() - 1);
      }
    }

    function quantityPlus() {
      $quantityNum.val(+$quantityNum.val() + 1);
    }
  })();

});

[imko]

vladislav198712, ну тогда придется доки читать)) это ж коллекция элементов теперь, у нее нету свойств/методов одного элемента