Script wont run on Firefox

Question

VBNick 3 Junior Poster

14 Years Ago

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

javascript

2 Contributors
4 Replies
147 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by VBNick

parry_kulk 14 Junior Poster

14 Years Ago

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.

Reply to this topic

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.

VBNick 3 Junior Poster · Answer 1 · 2010-02-15T23:43:30+00:00

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

parry_kulk 14 Junior Poster Team Colleague · Answer 2 · 2010-02-16T12:55:35+00:00

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

VBNick 3 Junior Poster · Answer 3 · 2010-02-16T13:10:06+00:00

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.