Подсчет суммы input и span

Question

Имеется верстка, с input (quantity), сумма span (summ) и ценой товара (cost).

<input class="input-number" type="number" value="1" min="1" step="1" name="quantity"/>
<span class="cost">5600 руб/м2 </span>
<span class="summ"></span>

Нужно, чтобы выводилась сумма. Из расчета: число инпут * на цену товара (5600) = сумма (summ).

Попробовал сделать так, не вышло.

let summ = document.querySelector('.summ'),
      cost= document.querySelector('.cost').innerText,
      inputNumber = document.querySelector('.input-number').value;
  let total = 0;
  total = cost* inputNumber;

summaryPrice.innerText = total + 'руб';

Даёт NaN, из-за cost. не могу разобраться, как сделать правильно :[

Answer 1

Собственно, немного подправил:

document.querySelector('.input-number').addEventListener('input', function() {
  let cost = parseInt(document.querySelector('.cost').innerText);
  document.querySelector('.summ').innerText = cost * +this.value + 'руб';
})

<input class="input-number" type="number" value="1" min="1" step="1" name="quantity" />
<span class="cost">5600 руб/м2 </span>
<span class="summ"></span>

Answer 2

Вам необходимо:

Слушать ввод данных в поле
В поле cost у Вас значение 5600 руб/м2 которое не является числом. Надо сначала из этого поля получить число.

    document.addEventListener('DOMContentLoaded', function () { // Проверяем загрузку контента
        let summ = document.querySelector('.summ'),
            cost= document.querySelector('.cost').innerText,
            inputNumber = document.querySelector('.input-number');

        inputNumber.addEventListener('input', function () { // Слушаем ввод данных
            let total = 0;
            let temp = String(parseInt(cost)); // Получаем из поля cost значение(только цифры)
            let temp1 = cost.split(' ')[0]; // Или так. Разбиваем по пробелу и берём первое значение (Если в поле cost не будет чисел с пробелами типа 7 500)
/*            let temp2 = cost.replace(/\D+/g,""); // Или так
            temp = temp2.substring(0, temp2.length - 1); // и убираем последнюю цифру из-за m2*/
            total = +temp * +inputNumber.value; // умножаем числа
            summ.innerText = total + 'руб'; // Выводим результат
        })
    });

<input class="input-number" type="number" value="1" min="1" step="1" name="quantity"/>
<span class="cost">5600 руб/м2 </span>
<span class="summ"></span>

БЛОГ НА HUSL

Подсчет суммы input и span

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