How do I access and update value in HTML input type number?-CodePudding

I am trying to perform a calculation where the number entered by the user in the first input is returned in the readonly second input field instantly. Its a simple calculation to take 20% of the first number and add it back to the first number, to be returned in the second number field. (e.g 20% transfer fees on $100 would return $120.

It seems I am able to access the values in the input fields, but the returned calculation is not returning the correct values. If 40 is entered in the first input, the returned second input displays 408 instead of 48. Can someone help?

function myFunc() {
  const transferamount = document.getElementById("sendamount").value;
  document.getElementById("totalled").value = transferamount   (0.20 * transferamount);
}

<form>
  <input type="number" id="sendamount" value="" name="amounttosend" oninput="myFunc()" required>

  <input type="text" id="totalled" value="" readonly>
</form>

CodePudding user response：

the value you get from an input is always considered as a string, that's why your calculations are incorrect. To perform as expected you need to convert your input to an int or a float using parseInt() or parseFloat()

const transferamount = parseInt(document.getElementById("sendamount").value);

CodePudding user response：

the calculus is slightly wrong ^^

Simply change

document.getElementById("totalled").value = transferamount   (0.20 * transferamount);

new_amount = transferamount * 1.20;
document.getElementById("totalled").value = new_amount;

Here is the edited code

function myFunc() {
    const transferamount = document.getElementById("sendamount").value;
    new_amount = transferamount * 1.20;
    document.getElementById("totalled").value = new_amount;
}

<form>
  <input type="number" id="sendamount" value="" name="amounttosend" oninput="myFunc()" required>

  <input type="text" id="totalled" value="" readonly>
</form>

Have a nice day !