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

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'ы (ищем или опять же, если у вас там <form>, то доступна коллекция ссылок) и элемент, в который надо записать результат вычислений.

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

// или

document.addEventListener('input', ({ target: t }) => {
  if (t.matches('.form-control')) {
    t.form.querySelector('span').textContent = Array
      .from(t.form.elements)
      .reduce((acc, n) => acc * (n.value | 0), 1);
  }
});

Answer 2

[Rst0]

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

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