JS одновременное изменение переменных в input по onchange

Question

Есть две переменные ("общая стоимость" и "цена") и одна постоянная ("доставка")

Есть два input поля: "общая стоимость" и "цена".

Необходимо, чтобы при изменении одной из переменных ("общая стоимость" или "цена") на лету (по onchange) соостветвенно менялась и вторая.

 <script>
  function addition() {
    var total = parseInt(document.getElementById("total").value);
    var price = parseInt(document.getElementById("price").value);
    var shipping = 5;

    totalOut = price + shipping;
    priceOut = total - shipping;

    document.getElementById("total").value = totalOut
    document.getElementById("price").value = priceOut;

  }
</script>

<form>
  Общая стоимсоть: <input id="total" type="number" value="105" onchange="addition();"/><br />
  Цена: <input id="price" type="number" value="100" onchange="addition();"/><br />
  Доставка: 5
</form>

Код вроде бы работает, но если попробуете его использовать, то увидите, что значения "прыгают", то есть складываются, но потом значение, которое меняете отпрыгивает на предыдущее значение.

Как этого избежать?

Answer 1

<script>
  function addition(input) {
    const id = input.id

    var total = parseInt(document.getElementById("total").value);
    var price = parseInt(document.getElementById("price").value);
    var shipping = 5;

    totalOut = price + shipping;
    priceOut = total - shipping;

    if (id === 'total') {
        document.getElementById("price").value = priceOut
    } else {
        document.getElementById("total").value = totalOut
    }
  }
</script>

<form>
  Общая стоимсоть: <input id="total" type="number" value="105" onchange="addition(this);"/><br />
  Цена: <input id="price" type="number" value="100" onchange="addition(this);"/><br />
  Доставка: 5
</form>

БЛОГ НА HUSL

JS одновременное изменение переменных в input по onchange

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