суммирование значений с input при нажатии на button JS

Question

Нужно при нажатии на button добавлять значение c input и выводить количество товара и сумму в span вместо ХХХ и ХХХ Буду благодарен за любую помощь!)

let button = document.getElementsByClassName('product-box__btn');
let input = document.getElementById('total__prods');
for (let i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
        input.innerHTML = e.target.closest('.product-box__meta').querySelectorAll('.qty__item')[i].value;
    });
}

<div class="top-cart">
  <div class="top-cart-info">
    <div class="container top-cart-info-container">
      <span class="top-cart-info__item">
        Товаров в корзине - <span class="red-info">XXX</span>, на сумму
        <span class="red-info">XXX</span> грн
      </span>
      <a class="btn-check" href="#openModal">Оформить заказ</a>
    </div>
  </div>
   
</div>
<div class="product-box__item">
  <h3 class="product-box__title">Овсяная каша с фруктами</h3>
  <div class="product-box__img">
    <img class="img-fluid" src="i/im1.jpg">
  </div>
  <div class="product-box__meta">
    <p>25 грн.</p>
    <div class="qty">
      <input class="qty__item" type="number"> Кол
    </div>
    <button class="product-box__btn" onclick="addition(this);">Добавить</button>
  </div>
</div>

Полный неработающий код ) https://codesandbox.io/s/affectionate-albattani-s0snm?file=/src/index.js

Answer 1

Часть проблем, которые я вижу в вашем решении:

Вы берете массив элементов(в вашм случае инпутов) с классом qty__item, а потом в него "кладете" что-то обаращясь к свойству value

let input = document.getElementsByClassName('qty__item');
...
input.value = // тут отдельный разговор

Но у массива нет свойства value, надо обращаться по индексу input[i]. Это общий комментарий, потому что здесь следует делать не так.

Стоит разобраться что вы берете и что вы кладете.

Ваша задача взять данные из input, причем судя по коду у вас будет их несколько каждый со своей кнопкой, а затем эти данные выводить в span.

Сейчас вы берете данные из span и кладете в input.

input.value = e.target.closest('.product-box__meta').querySelectorAll('.red-info')[i].innerHTML;

e.target.closest('.product-box__meta').querySelectorAll('.red-info')[i].innerHTML; не возвращает ничего, потому что здесь написанно "возьми ближайший к нажатой кнопке элемент с классом '.product-box__meta' и найди в нем все элементы с классом '.red-info', а это класс span, в который вы хотите вывести данные.

Рабочее решение:

Давайте присвоим элементу, к которому мы будем обащаться, присвом id, так нам будет проще его получить. <span id="total__price" class="red-info">XXX</span>
Получать данные из инпута мы будем по классу инпута e.target.closest('.product-box__meta').querySelectorAll('.qty__item')[i].value

let button = document.getElementsByClassName('product-box__btn');
let input = document.getElementById('total__price');
let d = input.value;
for (let i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
        input.innerHTML = e.target.closest('.product-box__meta').querySelectorAll('.qty__item')[i].value;
    });
}

<div class="top-cart">
<div class="top-cart-info">
  <div class="container top-cart-info-container">
    <span class="top-cart-info__item">
      Товаров в корзине - <span class="red-info">XXX</span>, на сумму
      <span id="total__price" class="red-info">XXX</span> грн
    </span>
    <a class="btn-check" href="#openModal">Оформить заказ</a>
  </div>
</div>
 
  </div>
  <div class="product-box__item">
<h3 class="product-box__title">Овсяная каша с фруктами</h3>
<div class="product-box__img">
  <img class="img-fluid" src="i/im1.jpg">
</div>
<div class="product-box__meta">
  <p>25 грн.</p>
  <div class="qty">
    <input id="product__count" class="qty__item" type="number" value="0"> Кол
  </div>
  <button class="product-box__btn">Добавить</button>
</div>
  </div>

БЛОГ НА HUSL

суммирование значений с input при нажатии на button JS

Ответы (1 шт):