CODEWITHSUNDEEP
html
StefB
StefB

Reputation: 11

setting input value using javascript

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>

Upvotes: 0

Views: 70

Answers (2)

Carsten Massmann
Carsten Massmann

Reputation: 28196

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.

Upvotes: 1

connexo
connexo

Reputation: 56770

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>

Upvotes: 0

Related Questions