PDA

Click to See Complete Forum and Search --> : javascript calculator doesnt work when calculate button is pressed

carl-stc
10-03-2003, 10:42 PM
I cant seem to figure out why the calculate button won't work, it returns a runtime error. and help would be appreciated.

Thanks, just ignore the non loaded graphics.

<HTML><HEAD><TITLE>School Store Web Site</TITLE>
<STYLE>H3 {
FONT-SIZE: 12pt; MARGIN: 10pt 0cm 0pt; LINE-HEIGHT: 16pt;

FONT-FAMILY: Arial
}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

<script language="JavaScript1.1" type="text/javascript"></script>

// End -->

</script>

<SCRIPT LANGUAGE="JavaScript1.1">
<!-- Original: Martin Webb (martin@irt.org) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Stop it, or Mrs. Phills will be after you!");
return false;
}
return true;
}

document.onmousedown=right;
document.onmouseup=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=right;
window.onmouseup=right;
// End -->
</script>

</HEAD>

<center>

<form name="calc" method="POST">

<table width="450" border="0" cellpadding="3">

<tr>

<td colspan="2"><span class="normalText"><h4>Price

Calculator</h4></span></td>

</tr>

<tr>

<th bgcolor="#333333" width="50%" align="left"><span

class="whiteText">Item</span></th>

<th bgcolor="#333333" width="50%" align="right"><span

class="whiteText">Select</span></th>

</tr>

<tr>

<td bgcolor="#cccccc" colspan="2"><span

class="normalText"><b>Regular Clothing</b></span></td>

</tr>

<tr>

<td bgcolor="#eeeeee"><span class="normalText">Dress Pants (boys and

Girls)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item1" size="49.39"></td>

</tr>

<tr>

<td bgcolor="#eeeeee"><span class="normalText">Short Sleeve Golf

Shirts (Black or White)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item2" size="28.69"></td>

</tr>

<tr>

<td bgcolor="#eeeeee"><span class="normalText">Long Sleeve Golf

Shirts</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item3" size="30.99"></td>

</tr>
<tr>

<td bgcolor="#eeeeee"><span class="normalText">Reversible

Vests</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item4" size="51.75"></td>

</tr>
<tr>

<td bgcolor="#eeeeee"><span class="normalText">Kilts</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item5" size="80.14"></td>

</tr>
<tr>

<td bgcolor="#eeeeee"><span class="normalText">Blouses (long or

short sleeve)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item6" size="40.69"></td>

</tr>
<tr>

<td bgcolor="#eeeeee"><span class="normalText">Oxford Shirts (long

or short sleeve)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item7" size="30.99"></td>

</tr>
<tr>

<td bgcolor="#eeeeee"><span

class="normalText">Sweatshirts</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item8" size="45.94"></td>

</tr>
<tr>

<td bgcolor="#cccccc" colspan="2"><span

class="normalText"><b>Clearance Final Sale Clothing</b></span></td>

</tr>

<tr>

<td bgcolor="#eeeeee"><span class="normalText">Girls Dress Pants

(Clearance Final Sale)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item9" size="22.99"></td>

</tr>

<tr>

<td bgcolor="#eeeeee"><span class="normalText">Girls Causual Pants

Black or khaki (Clearance Final Sale)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item10" size="22.99"></td>

</tr>
<tr>

<td bgcolor="#eeeeee"><span class="normalText">Boys Black Casual

Pants (Clearance Final Sale)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item11" size="28.49"></td>

</tr>
<tr>

<td bgcolor="#eeeeee"><span class="normalText">Boy's Khaki Casual

Pants (Clearance Final Sale)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item12" size="32.99"></td>

</tr>

<tr>

<td bgcolor="#eeeeee"><span class="normalText">Cyclone Vests

(Clearance Final Sale)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item13" size="34.50"></td>

</tr>

<tr>

<td bgcolor="#eeeeee"><span class="normalText">Shorts Boys and Girls

(Clearance Final Sale)</span></td>

<td bgcolor="#eeeeee" align="right"><input type="checkbox"

name="item14" size="34.44"></td>

</tr>

<tr>

<td bgcolor="#cccccc" colspan="2" align="right"><span

class="normalText">Price $</span><input type="text" name="pay"

size="10" style="background-color:#ffffff; color:#000000; border:1px

solid #000000; font-family:tahoma; font-size:8pt;

letter-spacing=1px"></td>

</tr>

<tr>

<td bgcolor="#eeeeee" align="center"></td>

<td bgcolor="#eeeeee" align="right"><input type="button"

onClick="count()" value="Calculate" style="background-color:#ffffff;

color:#000000; border:1px solid #000000; font-family:tahoma;

font-size:8pt; letter-spacing=1px"> <input type="reset" value="Reset"

style="background-color:#ffffff; color:#000000; border:1px solid

#000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"></td>

</tr>
</table>

</form>

</center>
Jona
10-03-2003, 11:03 PM
Could you tidy up the code so that it is more readable? The lines split and it is difficult to discern the HTML code, much less the JavaScript.

[J]ona
sciguyryan
10-04-2003, 03:38 AM
i can find the problem either - but, a start would be to remove these lines as the do nothing:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

<script language="JavaScript1.1" type="text/javascript"></script>

// End -->

</script>


if you tidy it up, then perhaps we can find the problem.
Fang
10-04-2003, 06:06 AM
Where is the function count?
carl-stc
10-04-2003, 12:30 PM
That is the part that returns all of the errors


<input type="button" onClick="count()" value="Calculate" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"
Jona
10-04-2003, 02:33 PM
Your error is "object expected," which means that function count() does not exist in your source code.

[J]ona
carl-stc
10-04-2003, 05:46 PM
how would I fix it, i know what the error was, but can't seem to resolve it by entering what to count. There are 14 items, look at the first and last items that i will send here, then help if you can.

Thanks, Carl H.

<td bgcolor="#eeeeee"><span class="normalText">Dress Pants (boys and Girls)</span></td><br/>
<td bgcolor="#eeeeee" align="right">
<input type="checkbox" name="item1" size="49.39" value="ON"></td></tr>


<tr>
<td bgcolor="#eeeeee"><span class="normalText">Shorts Boys and Girls (Clearance
Final Sale)</span></td><br/>
<td bgcolor="#eeeeee" align="right">
<input type="checkbox" name="item14" size="34.44" value="ON"></td>
</tr>
Jona
10-04-2003, 06:29 PM
The afforementioned error means that the function does not exist. So you have no JavaScript function called "count()" in your page.

[J]ona
Ice3T
10-04-2003, 06:59 PM
here you go:
(by the way other than the javascript funtion the 'whiteText' class was not there either)

<HTML><HEAD><TITLE>School Store Web Site</TITLE>
<STYLE>
H3 {FONT-SIZE:12pt; MARGIN:10pt 0cm 0pt; LINE-HEIGHT:16pt; FONT-FAMILY:Arial;}
.whiteText{FONT-SIZE:12pt; MARGIN:10pt 0cm 0pt; LINE-HEIGHT:16pt; FONT-FAMILY:Arial;COLOR:white}
</STYLE>

<script language=javascript>
<!--

function func01(){
var tot=0;
for(i=1; i<15; i++){if(document.getElementById('item'+i).checked)tot=tot+document.getElementById('item'+i).size;}
document.getElementById('pay').value=tot;
}


//-->
</script>
</HEAD>
<center>
<form id="calc" method="POST">
<table width="450" border="0" cellpadding="3">
<tr>
<td colspan="2"><span class="normalText"><h4>Price Calculator</h4></span></td>
</tr>
<tr>
<th bgcolor="#333333" width="50%" align="left"><span class="whiteText">Item</span></th>
<th bgcolor="#333333" width="50%" align="right"><span class="whiteText">Select</span></th>
</tr>
<tr>
<td bgcolor="#cccccc" colspan="2"><span class="normalText"><b>Regular Clothing</b></span></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Dress Pants (boys and Girls)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item1" size="49.39" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Short Sleeve Golf Shirts (Black or White)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item2" size="28.69" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Long Sleeve Golf Shirts</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item3" size="30.99" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Reversible Vests</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item4" size="51.75" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Kilts</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item5" size="80.14" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Blouses (long or short sleeve)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item6" size="40.69" value="ON"></td> </tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Oxford Shirts (long or short sleeve)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item7" size="30.99" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Sweatshirts</span></td><td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item8" size="45.94" value="ON"></td>
</tr>
<tr>
<td bgcolor="#cccccc" colspan="2"><span class="normalText"><b>Clearance Final Sale Clothing</b></span></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Girls Dress Pants (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item9" size="22.99" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Girls Causual Pants Black or khaki (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item10" size="22.99" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Boys Black Casual Pants (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item11" size="28.49" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Boy's Khaki Casual Pants (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item12" size="32.99" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Cyclone Vests (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item13" size="34.50" value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee">
<span class="normalText">Shorts Boys and Girls (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item14" size="34.44" value="ON"></td>
</tr>
<tr>
<td bgcolor="#cccccc" colspan="2" align="right"><span class="normalText">Price $</span>
<input type="text" id="pay" size="10" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"></td>
</tr>
<tr>
<td bgcolor="#eeeeee" align="center"></td>
<td bgcolor="#eeeeee" align="right"><input type="button" onClick=func01() value="Calculate" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px">
<input type="reset" value="Reset" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"></td>

</tr>
</table>

</form>

</center>
carl-stc
10-05-2003, 05:27 PM
how can i get the total field to display the decimals?
It is supposed to be more accurate.

Thanks in advance, Carl H>
Ice3T
10-05-2003, 09:50 PM
<HTML><HEAD><TITLE>School Store Web Site</TITLE>
<STYLE>
H3 {FONT-SIZE:12pt; MARGIN:10pt 0cm 0pt; LINE-HEIGHT:16pt; FONT-FAMILY:Arial;}
.whiteText{FONT-SIZE:12pt; MARGIN:10pt 0cm 0pt; LINE-HEIGHT:16pt; FONT-FAMILY:Arial;COLOR:white}
</STYLE>

<script language=javascript>
<!--
var a;
function func01(){
var tot=0;
for(i=1; i<15; i++){if(document.getElementById('item'+i).checked){a=eval(document.getElementById('item'+i).price); tot=(tot+a)}}
document.getElementById('pay').value=tot.toFixed(2);
}


//-->
</script>
</HEAD>
<center>
<form id="calc" method="POST">
<table width="450" border="0" cellpadding="3">
<tr>
<td colspan="2"><span class="normalText"><h4>Price Calculator</h4></span></td>
</tr>
<tr>
<th bgcolor="#333333" width="50%" align="left"><span class="whiteText">Item</span></th>
<th bgcolor="#333333" width="50%" align="right"><span class="whiteText">Select</span></th>
</tr>
<tr>
<td bgcolor="#cccccc" colspan="2"><span class="normalText"><b>Regular Clothing</b></span></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Dress Pants (boys and Girls)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item1" price=49.39 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Short Sleeve Golf Shirts (Black or White)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item2" price=28.69 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Long Sleeve Golf Shirts</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item3" price=30.99 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Reversible Vests</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item4" price=51.75 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Kilts</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item5" price=80.14 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Blouses (long or short sleeve)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item6" price=40.69 value="ON"></td> </tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Oxford Shirts (long or short sleeve)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item7" price=30.99 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Sweatshirts</span></td><td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item8" price=45.94 value="ON"></td>
</tr>
<tr>
<td bgcolor="#cccccc" colspan="2"><span class="normalText"><b>Clearance Final Sale Clothing</b></span></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Girls Dress Pants (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item9" price=22.99 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Girls Causual Pants Black or khaki (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item10" price=22.99 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Boys Black Casual Pants (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item11" price=28.49 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Boy's Khaki Casual Pants (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item12" price=32.99 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee"><span class="normalText">Cyclone Vests (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item13" price=34.50 value="ON"></td>
</tr>
<tr>
<td bgcolor="#eeeeee">
<span class="normalText">Shorts Boys and Girls (Clearance Final Sale)</span></td>
<td bgcolor="#eeeeee" align="right">

<input type="checkbox" id="item14" price=34.44 value="ON"></td>
</tr>
<tr>
<td bgcolor="#cccccc" colspan="2" align="right"><span class="normalText">Price $</span>
<input type="text" id="pay" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"></td>
</tr>
<tr>
<td bgcolor="#eeeeee" align="center"></td>
<td bgcolor="#eeeeee" align="right"><input type="button" onClick=func01() value="Calculate" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px">
<input type="reset" value="Reset" style="background-color:#ffffff; color:#000000; border:1px solid #000000; font-family:tahoma; font-size:8pt; letter-spacing=1px"></td>

</tr>
</table>

</form>

</center>
carl-stc
10-06-2003, 05:11 AM
It still doesn't use decimals, it just returns NaN in the total field, no matter what the answer shgould equal.
How can this be occuring?
Ice3T
10-07-2003, 07:46 PM
it works for me (ie6)
carl-stc
10-08-2003, 03:11 PM
any idea why it wont work for me on xp home and IE6. Could it be a problem inside windows itself?
carl-stc
10-09-2003, 08:21 PM
I want to know if you will look at the files for me, and tell me if there is any problem?

Any help would definately be appreciated
http://fcmail.st-clair.net/~carl.hall/store-m.htm
stepheno
10-09-2003, 10:00 PM
It looks to me that your code can't find func01().
stepheno
10-10-2003, 05:43 AM
you might need to specify the path to your func01.js file if it is in another directory.
carl-stc
10-10-2003, 05:34 PM
no, the path to the func01.js file is correct, it will work if i dont select any checkboxes, it will return 0.00 but once a checkbox is added, the output field comes as NaN.

The file is proboably working, and there must be some other reason why it isn't working.

TYhanks, C. H.
carl-stc
10-10-2003, 05:41 PM
can you see if there is a problem with any of the syntax in the html file for me?
stepheno
10-10-2003, 09:23 PM
Here are your problems. I've compared your version of the code to the version Ice3T posted and found what was wrong. In the func01() code you have the line
a=eval(document.getElementById('item'+i).price);
This line will assign the value in price from your checkboxes to a which is then added to the total that is displayed after clicking on the calculate button. In order for that to work you need to change the size property of your checkboxes to price and remove the quotes from around the amount.

In short, for each of your checkboxes change this:
<input type="checkbox" id="item1" size="49.39" value="ON">
to this:
<input type="checkbox" id="item1" price=49.39 value="ON">
carl-stc
10-11-2003, 05:51 PM
thanks, illl try that