javascript calculator doesnt work when calculate button is pressed

@carl-stcOct 04.2003

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>

<!– Begin

// End –>

</script>

<!– 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>

<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=”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>

to post a comment

JavaScript

20 Comments(s) _↴

@JonaOct 04.2003 — #[font=arial][color=maroon]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.[/color][/font]

[b][J]ona[/b]

@sciguyryanOct 04.2003 — #i can find the problem either - but, a start would be to remove these lines as the do nothing:

<SCRIPT LANGUAGE="JavaScript">



</script>

if you tidy it up, then perhaps we can find the problem.

@FangOct 04.2003 — #Where is the function count?

@carl-stcauthorOct 04.2003 — #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"

@JonaOct 04.2003 — #[font=arial][color=maroon]Your error is "object expected," which means that function count() does not exist in your source code.[/color][/font]

[b][J]ona[/b]

@carl-stcauthorOct 04.2003 — #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>

@JonaOct 04.2003 — #[font=arial][color=maroon]The afforementioned error means that the function does not exist. So you have no JavaScript function called "count()" in your page.[/color][/font]

[b][J]ona[/b]

@Ice3TOct 04.2003 — #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>



</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-stcauthorOct 05.2003 — #how can i get the total field to display the decimals?

It is supposed to be more accurate.

Thanks in advance, Carl H>

@Ice3TOct 06.2003 — #<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>



</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-stcauthorOct 06.2003 — #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?

@Ice3TOct 08.2003 — #it works for me (ie6)

@carl-stcauthorOct 08.2003 — #any idea why it wont work for me on xp home and IE6. Could it be a problem inside windows itself?

@carl-stcauthorOct 10.2003 — #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

[URL]http://fcmail.st-clair.net/~carl.hall/store-m.htm[/URL]

@stephenoOct 10.2003 — #It looks to me that your code can't find func01().

@stephenoOct 10.2003 — #you might need to specify the path to your func01.js file if it is in another directory.

@carl-stcauthorOct 10.2003 — #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-stcauthorOct 10.2003 — #can you see if there is a problem with any of the syntax in the html file for me?

[upl-file uuid=a364325b-b66f-4a5e-a352-14c8f2f4ce67 size=11kB]store-m.htm.txt[/upl-file]

@stephenoOct 11.2003 — #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-stcauthorOct 11.2003 — #thanks, illl try that

Also in #JavaScript _↴

changing text based on a select box Trouble linking a slideshow image to url Help regarding onfocus function in javascript

Success!

Help @carl-stc spread the word by sharing this article on Twitter...

Tweet This

javascript calculator doesnt work when calculate button is pressed

20 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

javascript calculator doesnt work when calculate button is pressed

20 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

20 Comments(s) _↴

Also in #JavaScript _↴