setting input value using javascript

Question

I want to get the value of the totalPrice into the HTML tag of input with id="totalprice" but it cant . the code is below:

function price() {
  var bagPrice, shirtPrice, totalPrice, x;

  bagPrice = document.getElementById("bag").value;
  shirtPrice = document.getElementById("shirt").value;
  totalPrice = document.getElementById("totalprice").value;
  totalPrice = bagPrice * shirtPrice;
}

<h3>You can make your orders here</h3>
<form id="myform">

  How many tote bags / sweatshirt are you purchasing ?
  <input type="number" id="bag" name="bag" value=""> <br>

  <label for="shirt">What are the price of tote bag / sweatshirt are you purchasing?</label>
  <input type="number" id="shirt" name="shirt" value=""> <br> <br>

  <label for="totalprice">Your total price is:</label>
  <input type="number" id="totalprice" name="totalprice" value="5" readonly> <br>
  <button type="button" onclick="price()">Calculate</button>


</form>

Form values are always strings. If you want to do calculations with form values, you need to cast them to the proper Number type first. — connexo
– connexo, Commented Apr 10, 2021 at 18:35
totalPrice = document.getElementById("totalprice").value; does not create a connection between the variable and the input value, meaning if either of them changes later on, the other will be unaffected. You want to do the opposite: document.getElementById("totalprice").value = bagPrice * shirtPrice;. — connexo
– connexo, Commented Apr 10, 2021 at 18:38

Carsten Massmann · Accepted Answer · 2021-04-10 21:20:24Z

I am not sure I have understood what you were trying to achieve, but the following will work in the way that it will multiply the first two inputs and will show the result in the third one:

function price(){
   document.getElementById("totalprice").value=
      document.getElementById("bag").value *
      document.getElementById("shirt").value;
}

<form>
<label>What is the price of tote bag ...
  <input type="number"   id="bag" name="bag" value="5"></label><br>
<label>... and the shirt <input type="number"  id="shirt" name="shirt" value="7"> you are buying?</label><br><br>
<label>Your total price is:
 <input type="number" id="totalprice" name="totalprice" value="" readonly></label><br>
<button type="button" onclick="price()">Calculate</button><span id
</form>

Or, in case you want to write it even shorter in the DRY sense you could defne the function price() like this:

const price=(ids=>{
  const e=ids.split(',').map(id=>document.getElementById(id));
  return ()=>e[0].value=e[1].value * e[2].value;
})('totalprice,bag,shirt')

This is very likely a little bit too complicated "for general consumption", but the way it is written using an IIFE, it keeps the global scope clean while determining the objects for the price() calculation in a private scope only once.

connexo · Accepted Answer · 2021-04-10 18:47:09Z

totalPrice = document.getElementById("totalprice").value; does not create a connection between the variable and the input value, meaning if either of them changes later on, the other will be unaffected. You want to do the opposite: document.getElementById("totalprice").value = bagPrice * shirtPrice;.

Next, form values are always strings. If you want to do calculations with form values, you need to cast them to the proper Number type first.

function price() {
  let bagPrice, shirtPrice;

  bagPrice = Number(document.getElementById("bag").value);
  shirtPrice = Number(document.getElementById("shirt").value);
  document.getElementById("totalprice").value = bagPrice * shirtPrice;
}

<h3>You can make your orders here</h3>
<form id="myform">

  How many tote bags / sweatshirt are you purchasing ?
  <input type="number" id="bag" name="bag" value=""> <br>

  <label for="shirt">What are the price of tote bag / sweatshirt are you purchasing?</label>
  <input type="number" id="shirt" name="shirt" value=""> <br> <br>

  <label for="totalprice">Your total price is:</label>
  <input type="number" id="totalprice" name="totalprice" readonly> <br>
  <button type="button" onclick="price()">Calculate</button>


</form>

In a real world application, you'd probably not have a Calculate button, but instead you want to do live updating of the total price as soon as any of the involved input's values changes:

function updateTotalPrice() {
  let bagPrice, shirtPrice, totalPrice;

  bagPrice = Number(document.getElementById("bag").value);
  shirtPrice = Number(document.getElementById("shirt").value);
  totalPrice = bagPrice * shirtPrice;
  
  document.getElementById("totalprice").value = isNaN(totalPrice) ? "" : totalPrice;
}

<h3>You can make your orders here</h3>
<form id="myform">

  How many tote bags / sweatshirt are you purchasing ?
  <input type="number" id="bag" name="bag" oninput="updateTotalPrice()"> <br>

  <label for="shirt">What are the price of tote bag / sweatshirt are you purchasing?</label>
  <input type="number" id="shirt" name="shirt" oninput="updateTotalPrice()"> <br> <br>

  <label for="totalprice">Your total price is:</label>
  <input type="number" id="totalprice" name="totalprice" readonly> <br>
  

</form>

Collectives™ on Stack Overflow

setting input value using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related