I need to create a function with 2 arguments (price1, price2), which should be added together and the result would be displayed in a text field after adding Vat to them.

Overall, I need to have 3 text fields: price1, price2 and results. In addition, the results field should be calculated after pushing the button calculate.

So far, I've e up with a return function with document.write, but it obviously doesn't display any text fields, which looks like that:

function getTotalPrice(price1,price2,Vat)
{
  var sum=price1+priceb;
  var Vat=20;
  return ((sum*Vat)*100)/100;
}
document.write(getTotalPrice(4,3));

I have no clue how to create the button that could calculate Vat and display it in the third text box.

I need to create a function with 2 arguments (price1, price2), which should be added together and the result would be displayed in a text field after adding Vat to them.

Overall, I need to have 3 text fields: price1, price2 and results. In addition, the results field should be calculated after pushing the button calculate.

So far, I've e up with a return function with document.write, but it obviously doesn't display any text fields, which looks like that:

function getTotalPrice(price1,price2,Vat)
{
  var sum=price1+priceb;
  var Vat=20;
  return ((sum*Vat)*100)/100;
}
document.write(getTotalPrice(4,3));

I have no clue how to create the button that could calculate Vat and display it in the third text box.

• javascript

• 1 Why do you have a third (unused) Vat variable in the function parameters? – Oded Commented Jun 5, 2011 at 18:35
• Thank you for pointing out, indeed, this one is also not working. – epsilon Commented Jun 5, 2011 at 18:44
• @Oded, optional parameters are technically fine. My question is not just why it was unused, but why Vat was redeclared inside the function, as it will then never take on any value except 20. – brymck Commented Jun 5, 2011 at 18:45

3 Answers 3

Buttons are created with the input tag. An example that does what you want:

<input type="text" id="price1">
<input type="text" id="price2">
<input type="text" id="results">
<input type="button" value="Calculate" onclick="calculateResults()">

<script type="text/javascript">
function calculateResults() {
    var price1Box = document.getElementById('price1');
    var price2Box = document.getElementById('price2');
    var resultsBox = document.getElementById('results');
    resultsBox.value = getTotalPrice(price1Box.value, price2Box.value);
}
</script>

There are cleaner ways to do this, but this is the most practical and simplest. You'll need the fixes posted by Bryan if you want getTotalPrice to work.

Issues:

1. Vat is unused as an argument, and even if it were used it would always be reinitialized in your code and assigned a value of 20.
2. priceb was a typo.

Beyond that the code doesn't seem to have any evident problems.

function getTotalPrice(price1, price2, vat) {
  vat = (vat === undefined? 20 : vat); // give vat a default value if empty
  return (price1 + price2) * vat;
}

document.write(getTotalPrice(4, 3));

Edit: Per the ment below, which is true, I figured I should just go ahead and simplify the math here. If the asker has a different equation in mind he should probably explain a bit more.

Edit: (vat === undefined? 20 : vat) is correct, producing any value other than undefined, default 20. (vat === undefined? vat : 20) will only produce undefined or 20.

This should do what you're after:

<script type="text/javascript">
  function getTotalPrice(price1,price2)
  {
    var vat = 20;
    return (((price1+price2) * vat) * 100) / 100;
  }

  function calculate()
  {
    var result = document.getElementById('result');
    result.value = getTotalPrice(document.getElementById('price1').value, document.getElementById('price2').value);
  }
</script>

<form>
  <input type="text" id="price1" />
  <input type="text" id="price2" />
  <input type="text" id="result" />
  <input type="button" value="Calculate" onclick="calculate()" />
</form>