/    Sign up×
Community /Pin to ProfileBookmark

Help with simple JavaScript page for school? Please!

Hi guys, I’ve got an assignment due on Tuesday for a JavaScript class and as sad as it is I seem to be having some trouble with it…I think I have everything I need, but I’m probably not doing the syntax right or maybe I’m missing something completely. Here’s what I’m supposed to do (first two pages are instructions, last page is what it’s supposed to look like):

[URL=http://img525.imageshack.us/my.php?image=001vq9.jpg][IMG]http://img525.imageshack.us/img525/1014/001vq9.th.jpg[/IMG][/URL]
[URL=http://img242.imageshack.us/my.php?image=002uz3.jpg][IMG]http://img242.imageshack.us/img242/5632/002uz3.th.jpg[/IMG][/URL]

[URL=http://img525.imageshack.us/my.php?image=003pk2.jpg][IMG]http://img525.imageshack.us/img525/9673/003pk2.th.jpg[/IMG][/URL]

Here’s the code that I have, I’m only using an index and an external stylesheet. As I said I know I must be missing something or doing something wrong but for the life of me I can’t seem to figure it out…if anyone could help me out and tell me what part I’ve made a mistake in and maybe how to fix it I would greatly appreciate it! Thanks so much!

[CODE]<html>

<head>

<title>Example Page</title>

<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>

<script type=”text/javascript”>

function enrollStudent(f)
{
var courseInfo = “”;
var coursePrice = new Array(1);
var courseCount = 0;

if (f.aspNetForBeginners.checked)
{
courseInfo = “ASP.NET for Beginners – 130.00 n”;
coursePrice[0] = 130.00;
courseCount++;
}

if (f.aspNetAdvanced.checked)
{
courseInfo = courseInfo + “ASP.NET Advanced – 180.00 n”;
coursePrice[1] = 180.00;
courseCount++;
}

if (f.ajax.checked)
{
courseInfo = courseInfo + “AJAX – 100.95 n”;
coursePrice[2] = 100.95;
courseCount++;
}

if (f.xhtml.checked)
{
courseInfo = courseInfo + “XHTML – 100.95 n”;
coursePrice[3] = 100.95;
courseCount++;
}

if (f.xml.checked)
{
courseInfo = courseInfo + “XML – 110.90 n”;
coursePrice[4] = 110.90;
courseCount++;
}

if (courseCount == 0)
{
alert(‘No courses have been selected. Please select your courses and click the Enroll Now button.’);
}
else
{
calTotal();
applyDiscount();
printReceipt(document.onlineEnrollment);
}
}

function calTotal()
{
var subtotal = 0;
for(var i = 0; i < coursePrice.length; i++)
{
subtotal += coursePrice[i];
}
return total
}

function applyDiscount()
{

var discountAmount = “”;

if (bonusCodeBox.value = “1234”)
{
if (courseCount > 3)
{
total = subtotal – coursePrice[2];
discountAmount = “- $” + coursePrice[2];
}
else if (courseCount > 2)
{
total = subtotal – (coursePrice[1] / 2);
discountAmount = “- $” + (coursePrice[1] / 2);
}
else if (courseCount > 1)
{
total = subtotal – (coursePrice[0] / 4);
discountAmount = “- $” + (coursePrice[0] / 4);
}
else if (courseCount == 1)
{
total = subtotal – 25;
discountAmount = “- $25.00”;
}
}
else
{
discountAmount = “- $0”;
}
}

function printReceipt(f)
{
f.outputResults.value = “Student Receipt” n nf.firstNameBox.value + ” ” + f.lastNameBox.value nf.cityBox.value + “, ” + f.selectProvince.options[f.selectProvince.selectedIndex].value nf.streetBox.value n f.postalCodeBox.value n ncourseInfo n n”Sub Total: $” + subtotal n”Discount: ” + discountAmount n”Total: $” + total;
}

</script>

</head>

<body>

<div id=”leftright”>

<div class=”left”>

<div class=”title”>Sign-up for the Following Online Web Programming Courses</div><br /><br />

<div class=”subtitle”>Please Enter your name and address:</div><br /><br />

<form name=”onlineEnrollment”>

&nbsp
First name:
<input type=”text” name=”firstNameBox” size=”30″ />

Last name:
<input type=”text” name=”lastNameBox” size=”30″ /><br />

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
Street: <input type=”text” name=”streetBox” size=”30″ /><br />

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
City:
<input type=”text” name=”cityBox” size=”30″ />

&nbsp&nbsp
Province:
<select name=”selectProvince”>
<option>Ontario</option>
<option>Alberta</option>
<option>British Columbia</option>
<option>Manitoba</option>
<option>Saskatchewan</option>
<option>New Brunswick</option>
<option>Nova Scotia</option>
<option>Prince Edward Island</option>
<option>Newfoundland & Labrador</option>
<option>Northwest Territories</option>
<option>Yukon</option>
<option>Nunavut</option>
</select><br />

Postal Code:
<input type=”text” name=”postalCodeBox” size=”30″ /><br /><br />

<div class=”subtitle”>Select the courses you would like to take and click the “Enroll Now” button.</div><br /><br />

<table name=”courseTable” border=”1px”>
<div class=”table”>
<tr>
<td>
<input type=”checkbox” name=”aspNetForBeginners” />
</td>
<td>
ASP.NET for Beginners
</td>
<td>
$130.00
</td>
</tr>
<tr>
<td>
<input type=”checkbox” name=”aspNetAdvanced” />
</td>
<td>
ASP.NET Advanced
</td>
<td>
$180.00
</td>
</tr>
<tr>
<td>
<input type=”checkbox” name=”ajax” />
</td>
<td>
AJAX (Asynchronous JavaScript an XML)
</td>
<td>
$100.95
</td>
</tr>
<tr>
<td>
<input type=”checkbox” name=”xhtml” />
</td>
<td>
XHTML
</td>
<td>
$100.95
</td>
</tr>
<tr>
<td>
<input type=”checkbox” name=”xml” />
</td>
<td>
XML
</td>
<td>
$110.90
</td>
</tr>
</div>
</table><br /><br />

Enter your secret bonus code:
<input type=”password” name=”bonusCodeBox” size=”30″ /><br />

<div class=”centered”><input type=”button” name=”enrollNowButton” value=”Enroll Now” onClick=”enrollStudent(document.onlineEnrollment)” /></div>

</div>

<div class=”right”>

<textarea rows=”25″ cols=”50″ name=”ouputResults” readonly></textarea>

</div>

</form>

</div>

</body>

</html>[/CODE]

Stylesheet:

[CODE]div.title {
font-size: large;
font-weight: 800;
}
div.subtitle {
font-weight: 800;
}
div.centered {
text-align: center;
}
body {
font-size: small;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
table {
font-size: small;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#leftright {
text-align: right;
width: 100%;
overflow: hidden;
}
div.right {
float: right;
/*width: 100%;
text-align: right;
overflow: hidden;*/
}
div.left {
float: left;
/*width: 50%;*/
}
[/CODE]

I’m not too worried about the stylesheet, it doesn’t have to look perfect…but for some reason it seems my functions aren’t working, and I’m not sure how I’m supposed to “add formatting to the courseInfo variable” and have it display both the course name and price.

Any help would be really appreciated!! ?

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@toicontienDec 08.2008 — If it helps, in the enrollStudent function, the courseInfo, coursePrice and courseCount variables are local to the enrollStudent function and do not exist outside of it.
Copy linkTweet thisAlerts:
@TheIconoclastauthorDec 08.2008 — I managed to fix some things, if not most. Here's my new code:

[CODE]<html>

<head>

<title>Test 2 - Paul Ritter</title>

<link rel="stylesheet" type="text/css" href="stylesheet.css">



<script type="text/javascript">

var coursePrice = new Array(1);
var courseCount = 0;
var subtotal=0;
var courseInfo;
var total=0;
var discountAmount=0;

function enrollStudent(f)
{

if (f.aspNetForBeginners.checked)
{
courseInfo = "ASP.NET for Beginners - 130.00 n";
coursePrice[0] = 130.00;
courseCount++;
}

if (f.aspNetAdvanced.checked)
{
courseInfo = courseInfo + "ASP.NET Advanced - 180.00 n";
coursePrice[1] = 180.00;
courseCount++;
}

if (f.ajax.checked)
{
courseInfo = courseInfo + "AJAX - 100.95 n";
coursePrice[2] = 100.95;
courseCount++;
}

if (f.xhtml.checked)
{
courseInfo = courseInfo + "XHTML - 100.95 n";
coursePrice[3] = 100.95;
courseCount++;
}

if (f.xml.checked)
{
courseInfo = courseInfo + "XML - 110.90 n";
coursePrice[4] = 110.90;
courseCount++;
}


if (courseCount == 0)
{
alert('No courses have been selected. Please select your courses and click the Enroll Now button.');
}
else
{
calTotal();
applyDiscount();
printReceipt(document.onlineEnrollment);
}
}



function calTotal()
{
for(var i = 0; i < coursePrice.length; i++)
{
subtotal += coursePrice[i];
}
return total
}

function applyDiscount()
{
if (document.onlineEnrollment.bonusCodeBox.value = "1234")
{
if (courseCount > 3)
{
total = (subtotal - coursePrice[2]);
discountAmount = "- $" + coursePrice[2];
}
else if (courseCount > 2)
{
total = subtotal - ((coursePrice[1] / 2));
discountAmount = "- $" + (coursePrice[1] / 2);
}
else if (courseCount > 1)
{
total = subtotal - ((coursePrice[0] / 4));
discountAmount = "- $" + (coursePrice[0] / 4);
}
else if (courseCount == 1)
{
total = (subtotal - 25);
discountAmount = "- $25.00";
}
}
else
{
discountAmount = "- $0";
}
}

function printReceipt(f)
{

//subtotal = parseFloat(subtotal);
//total = parseFloat(total);

f.outputResults.value = "Student Receipt n n" + f.firstNameBox.value + " " + f.lastNameBox.value + "n" + f.cityBox.value + ", " + f.selectProvince.options[f.selectProvince.selectedIndex].value + "n" + f.streetBox.value + "n" + f.postalCodeBox.value + "nn" + courseInfo + "nn" + "Sub Total: $" + subtotal + "n" + "Discount: " + discountAmount + "n" + "Total: $" + total;
}


function handleErr(msg,url,l)
{
txt="There was an error on this page.nn";
txt+="Error: " + msg + "n";
txt+="URL: " + url + "n";
txt+="Line: " + l + "nn";
txt+="Click OK to continue.nn";
alert(txt);
return true;
}
onerror=handleErr;

</script>


</head>


<body>

<div id="leftright">

<div class="left">

<div class="title">Sign-up for the Following Online Web Programming Courses</div><br /><br />

<div class="subtitle">Please Enter your name and address:</div><br /><br />



<form name="onlineEnrollment">


First name:
<input type="text" name="firstNameBox" size="30" />

Last name:
<input type="text" name="lastNameBox" size="30" /><br />

Street: <input type="text" name="streetBox" size="30" /><br />

City:
<input type="text" name="cityBox" size="30" />

Province:
<select name="selectProvince">
<option>Ontario</option>
<option>Alberta</option>
<option>British Columbia</option>
<option>Manitoba</option>
<option>Saskatchewan</option>
<option>New Brunswick</option>
<option>Nova Scotia</option>
<option>Prince Edward Island</option>
<option>Newfoundland & Labrador</option>
<option>Northwest Territories</option>
<option>Yukon</option>
<option>Nunavut</option>
</select><br />

Postal Code:
<input type="text" name="postalCodeBox" size="30" /><br /><br />

<div class="subtitle">Select the courses you would like to take and click the "Enroll Now" button.</div><br /><br />


<table name="courseTable" border="1px">
<div class="table">
<tr>
<td>
<input type="checkbox" name="aspNetForBeginners" />
</td>
<td>
ASP.NET for Beginners
</td>
<td>
$130.00
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="aspNetAdvanced" />
</td>
<td>
ASP.NET Advanced
</td>
<td>
$180.00
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ajax" />
</td>
<td>
AJAX (Asynchronous JavaScript an XML)
</td>
<td>
$100.95
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="xhtml" />
</td>
<td>
XHTML
</td>
<td>
$100.95
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="xml" />
</td>
<td>
XML
</td>
<td>
$110.90
</td>
</tr>
</div>
</table><br /><br />

Enter your secret bonus code:
<input type="password" name="bonusCodeBox" size="30" /><br />

<div class="centered"><input type="button" name="enrollNowButton" value="Enroll Now" onClick="enrollStudent(document.onlineEnrollment)" /></div>

</div>

<div class="right">

<textarea rows="25" cols="50" name="outputResults" readonly></textarea>

</div>

</form>

</div>

</body>

</html>[/CODE]


The problem I run into now is if a user selects courses that AREN'T in order (for example, ASP.NET for Beginners and XML), it gives me a NaN error (not a number) for the subtotal and total values, yet I can't seem to figure out why (I realize it's because it thinks they're string values, but why, and how do I fix that?)?

Also, I tried adding a bit more code to the enrollStudent() function, to prevent users from being able to leave the fields blank:
[CODE] if (f.firstNameBox.value = "")
{
alert('Please enter your first name.');
}
else
{
}

if (f.lastNameBox.value = "")
{
alert('Please enter your last name.');
}
else
{
}

if (f.streetBox.value = "")
{
alert('Please enter your street address.');
}
else
{
}

if (f.cityBox.value = "")
{
alert('Please enter your city.');
}
else
{
}

if (f.postalCodeBox.value = "")
{
alert('Please enter your postal code.');
}
else
{
}[/CODE]

It seems to me that I've done it right, yet I can still select courses and leave fields blank without any error message popping up. Any ideas?
Copy linkTweet thisAlerts:
@toicontienDec 09.2008 — You need to use the logical equals operator, not the assignment operator:
[CODE]if (f.streetBox.value [B][SIZE="6"]==[/SIZE][/B] "")
{
alert('Please enter your street address.');
}[/CODE]

That must be used in all the conditions for your if statements.
×

Success!

Help @TheIconoclast spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...