Problem with simple JS code

T

Trickynick1001

Hi, a newbie here. I don't have a real firm grasp on the idea of
Javascript, as I'm used to programming in Qbasic and C. I'm not used
to OOP. Anyway, I really don't have any idea what the problem is with
this code, it just simply won't work properly. Some of the functions
aren't done, but the main one gives me a Not a Number message in the
text box where the calculations are supposed to come up. I tried to
use a parseInt on my stuff, but it still won't work. Any help with
this would be appreciated. By the way, this is for school, so I
shouldn't really get people to write my program for me. . . I just want
advice. (By the way, if my computer science teacher comes across this.
.. . I'm not trying to cheat, I just need help!) The code is here:

<html> <head>
<title>Greaseburger's Greasy Burgers</title>
<script Language ="Javascript">
/****** GLOBAL VARIABLES ******/

var grndtot;
var drinkprices = new Array('1.00', '1.50', '1.75', '0.75');
var foodprices = new Array('2.25', '3.00', '3.00', '0.75', '0.5');
var dessertprices = new Array('1.25', '0.50', '2.50', '2.50', '3.25');

function confirm () {
var f = document.form01;
var p;
var foodtot;
var drinktot;
var desrttot;
var currenttot;
var grndtot;

p = parseInt(f.food1.value);
currenttot = p * foodprices[0];
foodtot += currenttot;
p = parseInt(f.food2.value);
currenttot = p * foodprices[1];
foodtot += currenttot;
p = parseInt(f.food3.value);
currenttot = p * foodprices[2];
foodtot += currenttot;
p = parseInt(f.food4.value);
currenttot = p * foodprices[3];
foodtot += currenttot;
p = parseInt(f.food5.value);
currenttot = p * foodprices[4];
foodtot += currenttot;
p = parseInt(f.drink1.value);
currenttot = p * drinkprices[0];
drinktot += currenttot;
p = parseInt(f.drink2.value);
currenttot = p * drinkprices[1];
drinktot += currenttot;
p = parseInt(f.drink3.value);
currenttot = p * drinkprices[2];
drinktot += currenttot;
p = parseInt(f.drink4.value);
currenttot = p * drinkprices[3];
drinktot += currenttot;
p = parseInt(f.dsrt1.value);
currenttot = p * dessertprices[0];
desrttot += currenttot;
p = parseInt(f.dsrt2.value);
currenttot = p * dessertprices[1];
desrttot += currenttot;
p = parseInt(f.dsrt3.value);
currenttot = p * dessertprices[2];
desrttot += currenttot;
p = parseInt(f.dsrt4.value);
currenttot = p * dessertprices[3];
desrttot += currenttot;
p = parseInt(f.dsrt5.value);
currenttot = p * dessertprices[4];
desrttot += currenttot;
grndtot = foodtot + drinktot + desrttot;
f.orderamt.value = grndtot;
f.ordertax.value = addtax(grndtot);
}

function addtax (grndtot) {
return grndtot * 1.15;
}

function makechange () {

}

</script>
<body>
<form name = "form01">
<center>
<table align = "center" border = 4>
<tr>
<td><b>FOOD</b></td>
<td><b>DRINKS</b></td>
<td><b>DESSERT</b></td>
</tr>
<tr>
<td>
<table border = 1>
<td>AMT</td><td>Item</td><td>Price</td>
<tr>
<td><input type = "text" name = "food1" size = 2></td>
<td>HAMBRG</td>
<td>$2.25</td>
<tr>
<td><input type = "text" name = "food2" size = 2></td>
<td>CHEESE</td>
<td>$3.00</td>
<tr>
<td><input type = "text" name = "food3" size = 2></td>
<td>SALAD</td>
<td>$3.00</td>
<tr>
<td><input type = "text" name = "food4" size = 2></td>
<td>FRIES</td>
<td>$0.75</td>
<tr>
<td><input type = "text" name = "food5" size = 2></td>
<td>ADD BACN</td>
<td>$0.50</td>
</table>
<td>
<table border = 1>
<td>AMT</td><td>Item</td><td>Price</td>
<tr>
<td><input type = "text" name = "drink1" size = 2></td>
<td>FOUNTN</td>
<td>$1.00</td>
<tr>
<td><input type = "text" name = "drink2" size = 2></td>
<td>COFFEE</td>
<td>$1.50</td>
<tr>
<td><input type = "text" name = "drink3" size = 2></td>
<td>TEA</td>
<td>$1.75</td>
<tr>
<td><input type = "text" name = "drink4" size = 2></td>
<td>WATER</td>
<td>$0.75</td>
</table>
<td>
<table border = 1>
<td>AMT</td><td>Item</td><td>Price</td>
<tr>
<td><input type = "text" name = "dsrt1" size = 2></td>
<td>ICECRM</td>
<td>$1.25</td>
<tr>
<td><input type = "text" name = "dsrt2" size = 2></td>
<td>COOKIE</td>
<td>$0.50</td>
<tr>
<td><input type = "text" name = "dsrt3" size = 2></td>
<td>FROSTIE</td>
<td>$2.50</td>
<tr>
<td><input type = "text" name = "dsrt4" size = 2></td>
<td>CAKE</td>
<td>$2.50</td>
<tr>
<td><input type = "text" name = "dsrt5" size = 2></td>
<td>CRM BR</td>
<td>$3.25</td>
</table>
</table>
<input type = "button" name "doorder" value = "CONFIRM ORDER"
onClick = 'confirm ()'><br>
<table border = 0>
<td><b>Subtotal:</b></td>
<td><input type = "text" name = "orderamt" size = 10></td>
<tr>
<td><b>Grand Total:</b></td>
<td><input type = "text" name = "ordertax" size = 10></td>
<tr>
<td><b>CASH:</b></td>
<td><input type = "text" name = "cash" size = 10></td>
</tr>
<td colspan = 2>
<center>
<input type = "button" name = "change" value = "C/AT"
onClick = 'makechange()'></td>
<tr>
<td><b>CHANGE:</b></td>
<td><input type = "text" name = "chng" size = 10></td>
</center>
</tr>
</table>
</center>
</body> </html>
 
T

Thomas 'PointedEars' Lahn

Trickynick1001 said:
Hi, a newbie here. I don't have a real firm grasp on the idea of
Javascript, as I'm used to programming in Qbasic and C. I'm not used
to OOP.
Obviously.

Anyway, I really don't have any idea what the problem is with
this code, it just simply won't work properly.
Click to expand...

"Does not work" is a useless error description. [psf 4.11
[...]
(By the way, if my computer science teacher comes across this.
. . I'm not trying to cheat, I just need help!)
Click to expand...

You should have not missed the lessons. You are welcome.
The code is here:

[more than 150 lines of invalid uncommented source code]
Click to expand...

You must be kidding.

<URL:http://validator.w3.org/>
<URL:http://jibbering.com/faq/>


PointedEars
 
T

Trickynick1001

I am sorry that I put up such a terrible post. I won't do that again,
but I was just stumped and hoped I might be able to get some help from
someone. I appreciate the links, but not the sarcasm.
Thanks,
Nick
 
A

ASM

Trickynick1001 a écrit :
gives me a Not a Number message in the
text box where the calculations are supposed to come up.
Click to expand...
<html> <head>
<title>Greaseburger's Greasy Burgers</title>
<script Language ="Javascript">
/****** GLOBAL VARIABLES ******/

var grndtot;
var drinkprices = new Array('1.00', '1.50', '1.75', '0.75');
var foodprices = new Array('2.25', '3.00', '3.00', '0.75', '0.5');
var dessertprices = new Array('1.25', '0.50', '2.50', '2.50', '3.25');

function confirm () {
var f = document.form01;
var p;
Click to expand...

try with
var foodtot = 0;
and so on
(hope all will become numbers ?)
var foodtot;
var drinktot;
var desrttot;
var currenttot;
var grndtot;

p = parseInt(f.food1.value);
currenttot = p * foodprices[0];
foodtot += currenttot;
[...]
grndtot = foodtot + drinktot + desrttot;
Click to expand...

what would you obtain here with :
alert('foodtot =\n'+foodtot);
alert('grndtot =\n'+grndtot);
 
S

Stephen Chalmers

Trickynick1001 said:
Some of the functions
aren't done, but the main one gives me a Not a Number message in the
text box where the calculations are supposed to come up. I tried to
use a parseInt on my stuff, but it still won't work.
Click to expand...

If the result of a calculation is NaN, then so is one or more of the
values involved
var drinkprices = new Array('1.00', '1.50', '1.75', '0.75');
var foodprices = new Array('2.25', '3.00', '3.00', '0.75', '0.5');
var dessertprices = new Array('1.25', '0.50', '2.50', '2.50', '3.25');
Click to expand...

Monetary values should be represented and processed as integers
(pennies/cents) then formatted appropriately when displayed.
var f = document.form01;
Click to expand...

Avoid referring to a form directly by its name:

document.forms.form01 or document.forms['form01'];

var foodtot;
var drinktot;
var desrttot;
var currenttot;
var grndtot;
Click to expand...

Values to be incremented should be initialised as integers.

p = parseInt(f.food1.value);
Click to expand...

If a field is blank, its value is a null string: parseInt("") == NaN;

therefore instead of calling parseInt directly, you need to write a
function that tests the return value of parseInt and returns its value
only if it's not NaN, otherwise 0.

In this application, parseInt should be passed a radix parameter of 10:


parseInt(value, 10);
 
L

Lasse Reichstein Nielsen

Trickynick1001 said:
Hi, a newbie here. I don't have a real firm grasp on the idea of
Javascript, as I'm used to programming in Qbasic and C. I'm not used
to OOP. Anyway, I really don't have any idea what the problem is with
this code, it just simply won't work properly.
Click to expand...

What do you expect it to do (in human words)?
What does it do? (be exact! "Nothing happens" is not as precise as
"no change to field values is apparent")


It's the three R's of getting help: To help you we must be able
to Reproduce, Recognize and Repair your problem.

For the first, we need the actual code (you provide that, good,
although a shorter example that exhibits the same problem would be
easier to work with, and the process of creating one often helps you
find the problem yourself :).

To recognize the problem, we need to know what errors you percieve
(this is where "it doesn't work" doesn't work :). All we see is a
page. We might see it in another browser than you and see other
problems. That's why it's important to say not just that it doesn't
work, but exactly how it differs from the desired result.

To repair the problem, we need to know what the desired result is, or
our suggested "repairs" might remove the problem, but give another
undesired result.

Some of the functions aren't done, but the main one gives me a Not a
Number message in the text box where the calculations are supposed
to come up.
Click to expand...

Unexpected result: check.
I tried to use a parseInt on my stuff, but it still won't work.
Click to expand...

Where, on what, for what, why?
The code is here:
Click to expand...

Since you are a student, I'll go pedantic on you and comment on style
problems too (heck, I'll take any excuse for that):

You should(!) ensure that your HTML is valid. Invalid HTML means that
the browser's interaction with it is unspecified, and while often
not a problem, when it is a problem, it can be quite hard to track
down. So, validate you HTML before fixing Javascript.

(missing DOCTYPE, required for valid HTML)
<html> <head>
<title>Greaseburger's Greasy Burgers</title>
<script Language ="Javascript">
Click to expand...

(missing lang="text/javascript" attribute, also required for valid HTML)

/****** GLOBAL VARIABLES ******/

var grndtot;
var drinkprices = new Array('1.00', '1.50', '1.75', '0.75');
var foodprices = new Array('2.25', '3.00', '3.00', '0.75', '0.5');
var dessertprices = new Array('1.25', '0.50', '2.50', '2.50', '3.25');
Click to expand...

You are storing numeric values as strings. I could understand if it's
for easy display, but you just seem to multiply by them. Just change
them to numbers:
var drinkprices = new Array(1.00, 1.50, 1.75, 0.75);
(or see below for a different approach);
function confirm () {
Click to expand...

Be aware that browsers already have a global function called confirm.
You might want to call your function differently to avoid conflict.
var f = document.form01;
Click to expand...

A form validator function called from a form control (like the button
you use), can take the form element directly as a parameter:
function confirm(f) { // or a more meaningfull name
and then be called as:
< ... onclick="confirm(this.form);">
It removes your need to know the name of the form, which again leaves
you open to change that without breaking your code.
(or, if called from onsubmit on the form itself:
var p;
var foodtot;
var drinktot;
var desrttot;
var currenttot;
var grndtot;
Click to expand...

This variable has the same name as the global variable.
p = parseInt(f.food1.value);
currenttot = p * foodprices[0];
foodtot += currenttot;
Click to expand...

This is your problem. You have not initialized foodtot to a number, so
it contains the undefined value. Adding a number to it gives NaN.
Adding more numbers to that gives NaN again.

Just assign 0 to foodtot when it's declared (and likewise to the other
totals).
p = parseInt(f.food2.value);
currenttot = p * foodprices[1];
foodtot += currenttot;
p = parseInt(f.food3.value);
currenttot = p * foodprices[2];
foodtot += currenttot;
Click to expand...

You need loops!

Create this fuction somewhere:

function totalInputs(form, fieldNames, prices) {
var total = 0;
for(var i = 0; i < fieldNames.length; i++) {
total += form.elements[fieldNames].value * prices;
}
return total;
}

Then you can just write:

var foodtot = totalInputs(f,
new Array("food1","food2","food3","food4","food5"),
foodprises);

grndtot = foodtot + drinktot + desrttot;
Click to expand...

Why split into foodtot, drinktot and desrttot, when all you do with
them is to add them again later.


A different approach could be creating a single price object:

var prices = new Object;
prices["drink1"] = 1.00;
prices["drink2"] = 1.50;
prices["drink3"] = 1.75;
prices["drink4"] = 0.50;
prices["food1"] = 2.25;
prices["food2"] = 3.00;
...
prices["dsrt1"] = 1.25;
prices["dsrt2"] = 0.50;
...
(there are shorter ways to write this in modern browsers, but this
should work in even acient ones).


Then you can find the total by looping through this and/or the
form and matching input control names against property names
of the price object:

function computeTotal(form, prices) {
var total = 0;
for(var fieldName in prices) {
var fieldValue = form.elements[fieldName].value;
total += Number(fieldValue) * prices[fieldName];
}
return value;
}

f.orderamt.value = grndtot;
f.ordertax.value = addtax(grndtot);
}
Click to expand...

Good luck.

/L
 
T

Thomas 'PointedEars' Lahn

Lasse said:
(missing lang="text/javascript" attribute, also required for valid HTML)
Click to expand...

'Did you mean: type="text/javascript"' ;-)


PointedEars
 
T

Trickynick1001

Thank you to everyone who helped. I appreciate your time and advice.
I will try to do what you have said. Also, I am very sorry about my
poor question and lack of specifics. Thus, I REALLY appreciate
everyone digging through my code for me.
Thanks again,
Nick
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
Getting extra blank rows from appending HTML..? 2
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Can anyone please help? HTML - two tables applying different styles 4
Registration form 13
Help needed with thank you message 5
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0

Members online

Total: 95 (members: 2, guests: 93)
Robots: 201

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top