473,395 Members | 1,937 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

Problem with simple JS code

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
7 1743
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
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
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

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
"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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: fripper | last post by:
I posted this problem a couple of days ago but felt I might have better luck re-stating the problem. Apparently I messed up IIS (v. 5) somehow because I am suddenly unable to load web forms! A...
10
by: Saso Zagoranski | last post by:
hi, this is not actually a C# problem but since this is the only newsgroup I follow I decided to post my question here (please tell me where to post this next time if you think this post...
0
by: 42 | last post by:
I implemented a simple class inherited from Page to create a page template. It simply wraps some trivial html around the inherited page, and puts the inherited page into a form. The problem I...
6
by: Ammar | last post by:
Dear All, I'm facing a small problem. I have a portal web site, that contains articles, for each article, the end user can send a comment about the article. The problem is: I the comment length...
7
by: Ankit Aneja | last post by:
I put the code for url rewrite in my Application_BeginRequest on global.ascx some .aspx pages are in root ,some in folder named admin and some in folder named user aspx pages which are in user...
8
by: Sarah | last post by:
I need to access some data on a server. I can access it directly using UNC (i.e. \\ComputerName\ShareName\Path\FileName) or using a mapped network drive resource (S:\Path\FileName). Here is my...
6
by: TPJ | last post by:
Help me please, because I really don't get it. I think it's some stupid mistake I make, but I just can't find it. I have been thinking about it for three days so far and I still haven't found any...
7
by: Lorenzino | last post by:
Hi, I have a problem with bindings in a formview. I have a formview; in the insert template i've created a wizard control and inside it i have an HTML table with some textboxes bound to the...
3
by: Robert Johnson | last post by:
Hi all. Created a simple table in my db. 3 colums one is a Int set for autoincrement. Itentity True, seed 1, Incremement 1, null False. The other colums are simple VarChar(50) null false on the...
30
by: Einstein30000 | last post by:
Hi, in one of my php-scripts is the following query (with an already open db-connection): $q = "INSERT INTO main (name, img, descr, from, size, format, cat, host, link, date) VALUES ('$name',...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.