CODEWITHSUNDEEP
javascripthtmlcalculated-field
Shuli Sampson
Shuli Sampson

Reputation: 1

Calculate Tax from price displayed in HTML table

I am trying to display the Price Including tax on a product page. The price is displayed in [OurPrice], so I would need to pull the displayed price (eg £0.95),times it by 1.2 and display the price in Pounds. Here is the code that i am trying to use, however, it doesnt display the calculated price. I would like to show it with the £ symbol in front of the number.

    <table cellspacing="1" cellpadding="0" border="0" >
  <tbody><tr>
    <td class="retail-price" valign="top" nowrap="">[RetailPriceTitle]</td>
    <td width="100%">[RetailPrice]</td>
  </tr><tr>
    <td class="our-price" valign="top" nowrap="">Our Price:</td>
    <td width="100%"><span id="op">[OurPrice]</span></td>
  </tr>
  <tr>
    <td class="incvat" valign="top" nowrap="">Inc Vat</td>
    <td class="incvat">

<script type="text/jscript">
var ours = document.getElementById("op").value;
  document.write (£(ours *1.2))

    </script>
</td>
  </tr>

  </tbody>
</table>

Upvotes: 0

Views: 1836

Answers (3)

drumwolf
drumwolf

Reputation: 409

I'm going to add to what Alex Wayne has already said.

I would take your JS code OUTSIDE the table cell block, and put it in the header before the tag starts. Then I'd take Alex's code and put it inside a "window.onload = function(){ //your code here }" block, so that it executes once the page has loaded.

And then instead of using "document.write()", I'd follow Alex's advice and replace the "document.write" line with a different line which will write the "incVat" value directly into the table cell.

Give a custom ID to the table cell where you want the value to be printed, like "incvatValue". 

<td class="incvat" id="incvatValue"> </td>

Then, write this line of code:

document.getElementById("incvatValue").innerHTML = incVat;

When you're finished, your JS should look like this and it should not be inside the table cell:

<script type="text/javascript">
window.onload = function(){
    var ourPrice = document.getElementById("op").innerHTML; // fetch the price
    ourPrice = ourPrice.replace('£', ''); // remove pound character
    ourPrice = parseFloat(ourPrice); // convert price from a string to a number
    var incVat = ourPrice * 1.2; // calculate the price with tax
    document.getElementById("incvatValue").innerHTML = incVat; // write the result
}
</script>

<td class="incvat" id="incvatValue"> </td>

BTW, you can replace "incvatValue" with whatever, just make sure the ID in the table cell matches with the ID being called in the JS.

Upvotes: 0

Raymond
Raymond

Reputation: 572

According to Alex answer, you need to put like this

<td width="100%">£10.0</td>

Upvotes: 0

Alex Wayne
Alex Wayne

Reputation: 187004

That's not syntactically valid javascript. Try something like this:

var ourPrice = document.getElementById("op").innerHTML; // fetch the price
ourPrice = ourPrice.replace('£', ''); // remove pound character
ourPrice = parseFloat(ourPrice); // convert price from a string to a number
var incVat = ourPrice * 1.2; // calculate the price with tax
document.write('£' + incVat); // write the result

http://jsfiddle.net/RjWMK/

However, there are other issues with this code that are whole other topics in themselves and beyond the scope of this answer. But as a research exercise:

  1. Don't use document.write(). Instead run a script that find the value after the whole page loads, and then inserts the value into the content of the correct node.

  2. Format the result properly using something like number.toFixed(2) or a currency formatting library.

Upvotes: 1

Related Questions