By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,262 Members | 1,128 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,262 IT Pros & Developers. It's quick & easy.

Problem with simple JS code

P: n/a
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>

Apr 21 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Trickynick1001 wrote:
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.
"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!)
You should have not missed the lessons. You are welcome.
The code is here:

[more than 150 lines of invalid uncommented source code]


You must be kidding.

<URL:http://validator.w3.org/>
<URL:http://jibbering.com/faq/>
PointedEars
Apr 21 '06 #2

P: n/a
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

Apr 21 '06 #3

P: n/a
ASM
Trickynick1001 a écrit :
gives me a Not a Number message in the
text box where the calculations are supposed to come up. <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;
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;
what would you obtain here with :
alert('foodtot =\n'+foodtot);
alert('grndtot =\n'+grndtot);
f.orderamt.value = grndtot;
f.ordertax.value = addtax(grndtot);
}

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


--
Stephane Moriaux et son [moins] vieux Mac
Apr 22 '06 #4

P: n/a

Trickynick1001 wrote:
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.
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');
Monetary values should be represented and processed as integers
(pennies/cents) then formatted appropriately when displayed.
var f = document.form01;
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;
Values to be incremented should be initialised as integers.

p = parseInt(f.food1.value);


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);

--
S.C.

Apr 22 '06 #5

P: n/a
"Trickynick1001" <st********@gmail.com> writes:
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.
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.
Unexpected result: check.
I tried to use a parseInt on my stuff, but it still won't work.
Where, on what, for what, why?
The code is here:
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">
(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');
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 () {
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;
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:
<form ... onsubmit="return confirm(this);">
where you can return false to prevent the submit).
var p;
var foodtot;
var drinktot;
var desrttot;
var currenttot;
var grndtot;
This variable has the same name as the global variable.

p = parseInt(f.food1.value);
currenttot = p * foodprices[0];
foodtot += currenttot;
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;
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[i]].value * prices[i];
}
return total;
}

Then you can just write:

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

grndtot = foodtot + drinktot + desrttot;
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);
}


Good luck.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Apr 22 '06 #6

P: n/a
Lasse Reichstein Nielsen wrote:
"Trickynick1001" <st********@gmail.com> writes:
<html> <head>
<title>Greaseburger's Greasy Burgers</title>
<script Language ="Javascript">


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


'Did you mean: type="text/javascript"' ;-)
PointedEars
Apr 22 '06 #7

P: n/a
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

Apr 22 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.