как объединить значение в поле input и значание value этого же инпута

Question

Как сделать так, что бы при вводе числа в инпут оно помещалось в value того же инпута, рассчитывалось и выводилось в div

https://codepen.io/pvd452546/pen/YzEoxMP

let totalOrderCost = document.getElementById('result');
let width = document.getElementById('width').value;
let height = document.getElementById('height').value;
let amountLogo = document.getElementById('number_logo').value;

const calculation = (width = 0, height = 0, amountLogo = 0) => {
    let priceMeter = 50; //стоимость метра
    let thermalTransfer = 35; //термоперенос

    let areaApplication = width * height * amountLogo; //общая площадь нанесения
    console.log(areaApplication);

    let a = areaApplication * priceMeter; //Общую площадь умножаем на стоимость метра.
    console.log(a);

    let transferCost = thermalTransfer * amountLogo; //стоимость переноса
    console.log(transferCost);

    let orderCost = a + transferCost; //стоимость заказа
    console.log(orderCost);
    
    if (orderCost < 0) {
        return false;
    } else {
        totalOrderCost.innerHTML = `${orderCost} ₽`;
    }
}
calculation();

Answer 1

А не будет ли проще сделать так?

const totalOrderCost = document.getElementById('result'),
  inputs = document.querySelectorAll('.input-value'),
  priceMeter = 50,
  thermalTransfer = 35;

inputs.forEach(item => {
  item.addEventListener("keyup", calculate)
})

function calculate() {
  let width = document.getElementById('width').value;
  let height = document.getElementById('height').value;
  let amountLogo = document.getElementById('number_logo').value;

  let areaApplication = width * height * amountLogo; //общая площадь нанесения
  let a = areaApplication * priceMeter; //Общую площадь умножаем на стоимость метра.
  let transferCost = thermalTransfer * amountLogo; //стоимость переноса
  let orderCost = a + transferCost; //стоимость заказа

  if (orderCost > 0) totalOrderCost.innerHTML = orderCost;
}

calculate();

<div class="flex-wrapper">
  <div class="calculator-content">
    <div class="calculator-content-body">
      <div class="calculator-content-body-left">
        <div class="calculator-content-body-left-inputs">
          <div class="input-wrapper">
            <div class="title">Ширина</div>
            <div class="input">
              <input class="input-value" type="number" id="width" value="10">
            </div>
          </div>
          <div class="input-wrapper">
            <div class="title">Высота</div>
            <div class="input">
              <input class="input-value" type="number" id="height" value="10">
            </div>
          </div>
          <div class="input-wrapper">
            <div class="title">Количестов лого</div>
            <div class="input">
              <input class="input-value" type="number" id="number_logo" value="10">
            </div>
          </div>
        </div>
      </div>
      <div class="calculator-content-body-right">
        <div class="final-results-wrapper">
          <div class="final-result-item">
            <div class="title">Стоимость заказа</div>
            <div class="value"><span id="result">0</span>₽</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

БЛОГ НА HUSL

как объединить значение в поле input и значание value этого же инпута

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