JavaScript Calculations within an HTML table

Question

I'm pretty new to JavaScript, so I don't even know if this is the correct language to attempt this, but I figured that I would try. I've read several other posts and I'm not finding something that's really giving me an idea on how to do this, so I'm asking here. The examples I've read through all deal with user-inputted numbers and/or selections. But, I'm going for a static way of calculation. I input in information into the table in HTML and the JavaScript calculates the information and outputs the information to a cell in the table. Here's the code that I have for the table so far (I know it's not exactly the best way to code it, I'm working on that, I just came across this stumbling block):

<table>
<tr><td><font size="2"><strong>Retail Price:</strong></font></td>
<td name = "retailPrice" id="retailPrice"><font size="2"><del>$97.97</del></font></td></tr>

<tr><td><font size="2"><strong>Sale Price:</strong></font></td>
<td><font size="2"><del>$89.97</del></font></td></tr>

<tr><td><font size="3"><strong>Our Price:</strong></font></td>
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">$79.97</font></td></tr>
<tr><td><font size="2"><strong>You Save:</strong></font></td>
<td name = "yourSavings"><font font size="2" color="Red"></font></td></tr></table>

And here's the only javascript that I can think to put together:

<script type="text/javascript" >
$(function(){
var add = parseInt($("#retailPrice").val()) + parseInt($("#ourPrice").val());
$("yourSavings").html(add);
}).keyup();
</script>

I know that I'm probably really wrong, but I thought I'd try to get something to work before asking for help. Basically I need the script to take the values in the cell "ourPrice" and divide it by the value in the cell "retailPrice" then subtract the total from "1" to give the percent saved and then output that to the cell named "yourSavings". I hope that makes sense. So basically it works like this:

(1-(ourPrice/retailPrice))

Any help is very much appreciated.

Answer 1

The val method is for form elements, you want to use text to extract the raw text from your table cells. Then you have to turn it into something that the number parsers will understand by removing the non-numeric prefix stuff:

function money_to_number(raw) {
    return parseFloat(raw.replace(/.*\$/, ''));
}

Also note that you want parseFloat rather than parseInt as you're dealing with non-integer values. And you want to subtract, not add, to get the savings.

You'll also need an id on the cell that you're targeting, the selector you're using is looking for an <yourSavings> element and there is no such thing:

<td name = "yourSavings" id="yourSavings">
    <font font size="2" color="Red">
    </font>
</td>

And you'll want to select the <font> inside that:

$("#yourSavings font").html(savings);

So, your final JavaScript should look something like this:

function money_to_number(raw) {
    return parseFloat(raw.replace(/.*\$/, ''));
}

var retail  = money_to_number($('#retailPrice').text());
var ours    = money_to_number($('#ourPrice').text());
var savings = retail - ours;
$("#yourSavings font").html(savings);

Formatting the savings and converting it to a percentage is left as an exercise for the reader.

And a live example: http://jsfiddle.net/ambiguous/bn7Wg/