Применить одну функцию к 3-ем разным input'ам

21 октября 2021, 16:50

Прошу вашей помощи, так как только учу JS. У меня есть функция, которая рассчитывает цену для первого товара, в зависимости от количества данного товара. Так вот, как используя одну и ту же функцию сделать тоже самое со всеми тремя товарами? В учет берем и то, что каждый товар имеет свою цену, так как на данный момент работает только с первым товаром, даже если ввожу данные в другие поля, расчет идет все равно только для первого товара.

<div class="services">
            <div class="service-block">
                <div class="image-service">
                    <img src="css/images/icons/car-engine-png-hd-ferrari-gtc4lussot-engine-ferrari-of-washington-512.png">
                </div>
                <div class="service-name">
                    <h1>Замена двигателя</h1>
                </div>
                <div class="block-quantity">
                    <input onblur="totalPrice()" type="number" id="quantity" class="input-quantity" value="1"><label for="quantity" class="label-quantity">Количество:</label>
                </div>
                <div class="delete">
                    <a class="delete-link">Удалить</a>
                </div>
                <div class="price">
                    <p class="price-text" id="result">545 руб.</p>
                </div>
            </div>
            <div class="service-block">
                <div class="image-service">
                    <img src="css/images/icons/car-engine-png-hd-ferrari-gtc4lussot-engine-ferrari-of-washington-512.png">
                </div>
                <div class="service-name">
                    <h1>Диагностика автомобиля</h1>
                </div>
                 <div class="block-quantity">
                    <input onblur="totalPrice()" type="number" id="quantity" class="input-quantity" value="1"><label for="quantity" class="label-quantity">Количество:</label>
                </div>
                <div class="delete">
                    <a class="delete-link">Удалить</a>
                </div>
                <div class="price">
                    <p class="price-text" id="result2">345 руб.</p>
                </div>
            </div>
            <div class="service-block">
                <div class="image-service">
                    <img src="css/images/icons/car-engine-png-hd-ferrari-gtc4lussot-engine-ferrari-of-washington-512.png">
                </div>
                <div class="service-name">
                    <h1>Покраска</h1>
                </div>
                <div class="block-quantity">
                    <input onblur="totalPrice()" type="number" id="quantity" class="input-quantity" value="1"><label for="quantity" class="label-quantity">Количество:</label>
                </div>
                <div class="delete">
                    <a class="delete-link">Удалить</a>
                </div>
                <div class="price">
                    <p class="price-text" id="result">600 руб.</p>
                </div>
            </div>
        </div>

Конкретно сама функция:

function totalPrice() {
    let quantityNumbers = document.getElementsByClassName('input-quantity');
    let price = 545;
    for (let i = 0; i < quantityNumbers.length; i++) {
        if (parseInt(quantityNumbers[i].value)) {
            price *= parseInt(quantityNumbers[i].value);
        }
    }
    document.getElementById('result').innerHTML = price + ' руб.';
}

Answer 1

let services = document.querySelector('.services'); 
 
services.addEventListener('input', amountOfMoney); 
 
function amountOfMoney (e){ 
  let price = e.target.closest('.service-block').querySelector('.price-text').innerHTML; 
  console.log( price ) 
 
  let count = e.target.value; 
  console.log( count ) 
  let arr = price.split(' '); 
 
  let sum = arr[0] * count; 
  console.clear(); 
  console.log( sum ) 
 
} 
 
services.addEventListener('click', function(e){ 
  let target = e.target; 
 
  if( target.tagName != 'a'.toUpperCase() ){ 
    return  
  } 
 
  let number = target.closest('.service-block').querySelector('.input-quantity').value 
 
  if( number > 0 ){ 
    target.closest('.service-block').querySelector('.input-quantity').value = 0; 
  } 
   
})

<div class="services"> 
            <div class="service-block"> 
                <div class="image-service"> 
                    <img src="css/images/icons/car-engine-png-hd-ferrari-gtc4lussot-engine-ferrari-of-washington-512.png"> 
                </div> 
                <div class="service-name"> 
                    <h1>Замена двигателя</h1> 
                </div> 
                <div class="block-quantity"> 
                    <input  type="number" id="quantity" class="input-quantity" value="0"><label for="quantity" class="label-quantity">Количество1:</label> 
                </div> 
                <div class="delete"> 
                    <a class="delete-link">Удалить</a> 
                </div> 
                <div class="price"> 
                    <p class="price-text" id="result1">545 руб.</p> 
                </div> 
            </div> 
            <div class="service-block"> 
                <div class="image-service"> 
                    <img src="css/images/icons/car-engine-png-hd-ferrari-gtc4lussot-engine-ferrari-of-washington-512.png"> 
                </div> 
                <div class="service-name"> 
                    <h1>Диагностика автомобиля</h1> 
                </div> 
                 <div class="block-quantity"> 
                    <input  type="number" id="quantity" class="input-quantity" value="0"><label for="quantity" class="label-quantity">Количество2:</label> 
                </div> 
                <div class="delete"> 
                    <a class="delete-link">Удалить</a> 
                </div> 
                <div class="price"> 
                    <p class="price-text" id="result2">345 руб.</p> 
                </div> 
            </div> 
            <div class="service-block"> 
                <div class="image-service"> 
                    <img src="css/images/icons/car-engine-png-hd-ferrari-gtc4lussot-engine-ferrari-of-washington-512.png"> 
                </div> 
                <div class="service-name"> 
                    <h1>Покраска</h1> 
                </div> 
                <div class="block-quantity"> 
                    <input  type="number" id="quantity" class="input-quantity" value="0"><label for="quantity" class="label-quantity">Количество3:</label> 
                </div> 
                <div class="delete"> 
                    <a class="delete-link">Удалить</a> 
                </div> 
                <div class="price"> 
                    <p class="price-text" id="result3">600 руб.</p> 
                </div> 
            </div> 
</div>

проблема возникла как подсчитать конкретный инпут через цикл ?
Правильно применил к HTML - структуре два обработчика ?

Answer 2

<input onblur="totalPrice(this)" ...
function totalPrice(el) {
  ...
  el.closest(".service-block").querySelector(".price-text").innerHTML = price + ' руб.';
}