как перемножить значения input

Question

Я новичок в js. Нужна помощь. Есть несколько товаров. Нужно вычислить итог выбранного товара при перемножении количества и цены. Смогла только получить значения value, но не получается их перемножить, чтобы получить общую стоимость и вывести в "summa". Нужен скрипт на ванильном js. Заранее спасибо

var inputs = document.querySelectorAll('input');
    for (var input of inputs) {
        input.addEventListener('input', function(){
            calkulator();
})
}

function calkulator(){

var vegetable = document.getElementsByClassName("ida"); //слушаем товар
      for (var checkbox of vegetable) {
        checkbox.addEventListener("click", function() {
         var x = (this.value);
        console.log(x); 
            
});
}
      
var quantity = document.getElementsByClassName("pr"); //слушаем количество товара
      for (var number of quantity) {
        number.addEventListener("click", function() {
         var y = (this.value);
        console.log(y); 
            
});  
}
    

}
calkulator();

<div class="col-3 vegetables__list">
            <img src="img/vegetables/carrot.jpg" class="item__img">
            <input id="vegetable" type="checkbox" class="ida" name="veget carrot" value="60"/><h2>морковь </h2></input><br><br>
            <span>Цена: 60 руб./кг</span>
            <p>Количество: <input type="number" name="quantity" class="pr" min="0" max="50" step="0.1" value="" id="quantity"/><span> кг</span></p>
            <p>Итого: <span id="summa">0 руб</span> </p> 
             
        </div>
                    
                <div class="col-3 vegetables__list">
            <img src="img/vegetables/beet.jpg"class="item__img">
            <input id="vegetable" type="checkbox" name=" veget beet" class="ida" value="80"/><h2>свекла</h2></input><br><br>
            <span>Цена: 80 руб./кг</span>
            <p>Количество: <input type="number" name="quantity" class="pr" min="0" max="50" step="0.1" value="" id="quantity"/><span> кг</span></p>
            <p>Итого: <span id="summa">0 руб</span> </p>
             
        </div>

Answer 1

Немного переделал html и полностью переделал ваш js. Надеюсь, то, что вам нужно

const inputs = document.querySelectorAll('.pr');
const sumsTotal = document.querySelectorAll('#summa');
const sums = document.querySelectorAll('.sum');

inputs.forEach((item, i) => {
    item.addEventListener('input', () => {
        sumsTotal[i].innerHTML = item.value * Number(sums[i].innerHTML);
    });
});

<div class="col-3 vegetables__list">
  <img src="img/vegetables/carrot.jpg" class="item__img">
  <input id="vegetable" type="checkbox" class="ida" name="veget carrot" value="60" />
  <h2>морковь </h2>
  </input><br><br>
  <p>Цена: <span class="sum">60</span> руб./кг</p>
  <p>Количество: <input type="number" name="quantity" class="pr" min="0" max="50" step="1" value="1" id="quantity" /><span> кг</span></p>
  <p>Итого: <span id="summa">60</span> руб</p>
</div>

<div class="col-3 vegetables__list">
  <img src="img/vegetables/beet.jpg" class="item__img">
  <input id="vegetable" type="checkbox" name=" veget beet" class="ida" value="80" />
  <h2>свекла</h2>
  </input><br><br>
  <p>Цена: <span class="sum">80</span> руб./кг</p>
  <p>Количество: <input type="number" name="quantity" class="pr" min="0" max="50" step="1" value="1" id="quantity" /><span> кг</span></p>
  <p>Итого: <span id="summa">80</span> руб</p>

</div>

БЛОГ НА HUSL

как перемножить значения input

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