Hello! I made a little app/page to help me count the money when Im done my shift at work. It runs fine in IExplorer, but it wont run in Firefox..can someone help?

<html>
<head>
<title>Money Calculator 1.0</title>
</head>
<body>
<script type="text/javascript">
function clr()
{
    document.getElementById("hundred").value=0;
    document.getElementById("fifty").value=0;
    document.getElementById("twenty").value=0;
    document.getElementById("ten").value=0;
    document.getElementById("five").value=0;
    document.getElementById("toonie").value=0;
    document.getElementById("loonie").value=0;
    document.getElementById("quarter").value=0;
    document.getElementById("dime").value=0;
    document.getElementById("nickel").value=0;
    document.getElementById("penny").value=0;
    document.getElementById("tsum").value=0;
    document.getElementById("change").value=0;
}
function sum()
{
    if(FinalCheck() == false)
    {
        return;
    }
    var total = 0;
    total = total + document.getElementById("change").value * 100
    + document.getElementById("hundred").value * 10000
    + document.getElementById("fifty").value * 5000
    + document.getElementById("twenty").value * 2000
    + document.getElementById("ten").value * 1000
    + document.getElementById("five").value * 500
    + document.getElementById("toonie").value * 200
    + document.getElementById("loonie").value * 100
    + document.getElementById("quarter").value * 25
    + document.getElementById("dime").value * 10
    + document.getElementById("nickel").value * 5
    + document.getElementById("penny").value * 1;

    document.getElementById("tsum").value = total / 100;
}
function IsValid(text_box)
{
    if(isNaN(document.getElementById(text_box).value))
    {
        document.getElementById(text_box).style.color = "red";
    }
    else
    {
        document.getElementById(text_box).style.color = "black";
    }
}
function FinalCheck()
{
    var invals = 0;
    if(isNaN(document.getElementById("change").value)) {invals += 1;}
    if(isNaN(document.getElementById("hundred").value)) {invals += 1;}
    if(isNaN(document.getElementById("fifty").value)) {invals += 1;}
    if(isNaN(document.getElementById("twenty").value)) {invals += 1;}
    if(isNaN(document.getElementById("ten").value)) {invals += 1;}
    if(isNaN(document.getElementById("five").value)) {invals += 1;}
    if(isNaN(document.getElementById("toonie").value)) {invals += 1;}
    if(isNaN(document.getElementById("loonie").value)) {invals += 1;}
    if(isNaN(document.getElementById("quarter").value)) {invals += 1;}
    if(isNaN(document.getElementById("dime").value)) {invals += 1;}
    if(isNaN(document.getElementById("nickel").value)) {invals += 1;}
    if(isNaN(document.getElementById("penny").value)) {invals += 1;}

    if(invals > 0)
    {
        alert("Red text indicates invalid input. Please re-enter the values marked in red.");
        return false;
    }
    return true;
}
</script>
<table width="100%">
<tr>
<td valign="top">
<center><font face="Arial Black"><font size="60"><b>Money Calculator</b></font></font></center>
</td>
</tr>
</table>
<br>
<table height="50%" width="100%" border="2" align="left" valign="top">

<tr height="10%">
<td valign="top" width="10%">
<img src="change.jpg">
</td>
<td valign="top" width="10%">
<img src="hundred.jpg" width="141" height="64">
</td>
<td valign="top" width="10%">
<img src="fifty.jpg" width="141" height="64">
</td>
<td valign="top" width="10%">
<img src="twenty.jpg" width="141" height="64">
</td>
<td valign="top" width="10%">
<img src="ten.jpg" width="141" height="64">
</td>
<td valign="top" width="10%">
<img src="five.jpg" width="141" height="64">
</td>
</tr>

<tr height="10%">
<td>
<b>$$&nbsp;</b><input type="text" name="change" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('change')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="hundred" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('hundred')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="fifty" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('fifty')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="twenty" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('twenty')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="ten" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('ten')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="five" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('five')">
</td>
</tr>

<tr height="10%">
<td valign="top" width="10%">
<img src="toonie.gif">
</td>
<td valign="top" width="10%">
<img src="loonie.gif">
</td>
<td valign="top" width="10%">
<img src="quarter.jpg">
</td>
<td valign="top" width="10%">
<img src="dime.jpg">
</td>
<td valign="top" width="10%">
<img src="nickel.gif">
</td>
<td valign="top" width="10%">
<img src="penny.gif">
</td>
</tr>

<tr height="10%">
<td>
<b>Qty&nbsp;</b><input type="text" name="toonie" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('toonie')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="loonie" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('loonie')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="quarter" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('quarter')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="dime" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('dime')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="nickel" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('nickel')">
</td>
<td>
<b>Qty&nbsp;</b><input type="text" name="penny" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('penny')">
</td>
</tr>
<tr>
<td>
<br>
<input type="button" name="sum" value="Sum" onclick="sum()">
<input type="button" name="clear" value="Clear All" onclick="clr()">
<br>
<input type="text" name="tsum" value=0 size="5" style="font-size:25pt;" readonly="readonly">
</td>
</tr>
</table>

</body>
</html>

thanks

In the javascript you have used getElementById() function as

document.getElementById("change")

But the input text element is having only 'name' attribute and no 'id' attribute

<input type="text" name="change" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('change')">

If the id attribute is not present than getElementById() in IE uses the name attribute hence the scripts work in IE but not in FF

add the 'id' attribute in the text element as,

<input type="text" name="change" id="change" value=0 size="10" style="font-size:12pt;" onkeyup="IsValid('change')">

Do this for all the elements for whom you are using the getElementById() function. This should solve your issue.

Nice! thank you!
I finally stumbled on a post that talked about using the error console in firefox, but all it said was

Error: document.getElementById(text_box) is null
Source File: file:///C:/Users/Nicolas/Desktop/Money%20Calculator/index.html
Line: 23

like 10 times

it works now. thanks a million =D

You can also use firebug plugin for firefox for debugging purpose.

I downloaded firebug and took a look..I created a few errors in my code intentionally, but it didn't seem to find them. It looks interesting though. I'll read up on it next time I get snagged. Thanks anyways.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.