Как заполнить произведение для каждой ячейки?

Question

[syrok_0824]

У меня есть такая форма:


Не получается заполинить "Примерная стоимость", которая высчитывается произведением длины,ширины и количества.

Мой html

<div class="col-md-4">
          <label>Ширина(мм.)</label>
          <input type="number" class="form-control" placeholder="мм." name="width" value="" min="0">
</div>
<div class="col-md-4">
          <label>Длина(мм.)</label>
          <input type="number" class="form-control" placeholder="мм." name="length" value="" min="0">
</div>
<div class="col-md-4">
          <label>Количество</label>
          <input type="number" class="form-control" placeholder="Количество" name="count" value="1" min="1">
</div>
<div class="col-md-8 mt-5">
          <p class="form-control" name="result">Примерная стоимость: <span id ="total" >0</span></p>
</div>

JS

const total = document.getElementById('total'); 
const inputs = [...document.querySelectorAll('input.form-control')];
inputs.forEach(input => 
  { input.addEventListener('input', () => { 
    console.log(total)
    total.innerText = inputs.reduce((acc, input) => 
      { console.log(input.value) 
        return acc * (+input.value || 0) }, 1) }) })

Answer 1

[0xD34F]

"Добавить"? Понятно, почему ничего не получается - формы добавляются динамически, так что обработчики событий вы пытаетесь назначать элементам, которых ещё нет. Применим делегирование - обработчик добавляем один раз, выше форм, проверяем целевой элемент, если это оказался интересующий нас input, то поднимаемся от него к элементу формы, ищем внутри неё все input'ы и элемент, в который надо записать результат вычислений.

document.addEventListener('input', e => {
  if (e.target.classList.contains('form-control')) {
    const form = e.target.closest('селектор формы');
    form.querySelector('span').innerText = Array
      .from(form.querySelectorAll('input.form-control'))
      .reduce((acc, n) => acc * (+n.value || 0), 1);
  }
});

Answer 2

[Rst0]

Не получается заполинить "Примерная стоимость", которая высчитывается произведением длины,ширины и количества.

А где цена за единицу???