#### Archived

This topic is now archived and is closed to further replies.

# Javascript not work at all

## Recommended Posts

ok I am in school and both all the other students and the teacher are stumped.

```/*
New Perspectives on JavaScript, 2nd Edition
Tutorial 5
Tutorial Case

Author:
Date:

Filename: order.js

Functions List:
todayTxt()
Displays the current date in the format mm/dd/yyyy.

startForm()
Sets up and initializes the form1 Web form.

resetForm1()
Reloads the current Web page, resetting the form.

calcPrice()
Calculates the price of the customer order by
multiplying the product price by the quantity ordered.

calcShipping()
Calculates the shipping cost of the item

calcTotal()
Calculates the total cost of the order including the sales price,
shipping cost, and sales tax.

checkForm1()
entered by the user.

*/

function todayTxt() {
var Today = new Date();
return Today.getMonth() + 1 + "-" + Today.getDate() + "-" + Today.getFullYear();
}

function startForm()
{
document.forms[0].date.value = todayTxt();
}

```

and this htm file

```<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<!--
New Perspectives on JavaScript, 2nd Edition
Tutorial 5
Tutorial Case

GPS-ware Form 1
Author:
Date:

Filename:         form1.htm
Supporting files: gpsware.css, gpsware.jpg, order.js, functions.js

-->

<title>Product Order Form 1</title>
<script type="text/javascript" src="order.js"></script>

<body>
<form id="form1" method="post" action="form2.htm">

<a href="#">Product Catalog</a>
<a href="#">Order Form</a>
<a href="#">Maps Online</a>
<a href="#" class="newgroup">Countries</a>
<a href="#">States</a>
<a href="#">National Parks</a>
<a href="#">Hiking Trails</a>
<a href="#">Cities</a>
<a href="#">Astronomical</a>
<a href="#">Natural</a>
<a href="#" class="newgroup">GoMap 1.0</a>
<a href="#">Drive Planner 2.0</a>
<a href="#">Hiker 1.0</a>
<a href="#">Tech Support</a>
<a href="#">FAQs</a>
</div>

<div id="main">
<p id="logo"><img src="gpsware.jpg" alt="GPS-ware" /></p>
<h1>Order Form</h1>
<p id="datep">
</p>

<fieldset>
<legend>Select a Product</legend>

<table>
<tr>
<td class="labelcell">Product</td>
<td class="inputcell">
<select name="prod" id="prod">
<option value="0">Products from GPS-ware</option>
<option value="19.95">GoMap 1.0 (\$19.95)</option>
<option value="29.95">Drive Planner 2.0 (\$29.95)</option>
<option value="29.95">Hiker 1.0 (\$29.95)</option>
</select>

<select name="qty" id="qty">
<option value="0">Quantity</option>
<option value="1">1</option><option value="2">2</option><option value="3">3</option>
<option value="4">4</option><option value="5">5</option><option value="6">6</option>
<option value="7">7</option><option value="8">8</option><option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td class="outcell">
</td>
</tr>

<tr>
<td class="labelcell">Shipping</td>
<td>
<p><input type="radio" name="shipType" id="ship1" value="4.95" />
<label for="ship1">Standard (4-6 business days): \$4.95</label>
</p>
<p><input type="radio" name="shipType" id="ship2" value="8.95" />
<label for="ship2">Express (2 days): \$8.95</label>
</p>
<p><input type="radio" name="shipType" id="ship3" value="12.95" />
<label for="ship3">Next Day (1 day): \$12.95</label>
</p>
</td>

<td class="outcell">
</td>
</tr>

<tr>
<td colspan="2" class="labelcell2">Subtotal</td>
<td class="outcell">
</td>
</tr>

<tr>
<td colspan="2" class="labelcell2">Tax (5%)</td>
<td class="outcell">
</td>
</tr>

<tr>
<td colspan="2" class="labelcell2">TOTAL</td>
<td class="outcell">
</td>
</tr>
</table>

</fieldset>

<p id="formbuttons">
<input type="reset"  name="cancelb" id="cancelb" value="Cancel" />
<input type="submit" name="nextb" id="nextb" value="Next" />
</p>

</div>

</form>

</body>
</html>
```

and when I open the page in firefox and open the error console i get this error

Error: document.forms[0] is undefined

Line: 49

the same thing comes up when changing the "0" to "form1"

Error: document.forms.form1 is undefined

Line: 49

I tried using getElementById and the console says it returns null

why is this happening?

##### Share on other sites

change

`window.onLoad = startForm();`

to

`window.onload = startForm();`

lower case l

##### Share on other sites

nope that didn't work. anything else?

##### Share on other sites

try

`window.onload = function() {document.getElementById("form1").date.value=startForm()};`

##### Share on other sites

Change:

`window.onload = startForm();`

To:

`window.onload = startForm;`

When binding an event you should assign the function object, not actually call it. In your case you've assigned the result of the function which is executed before the page is loaded (before the form actually exists), to be called after the page is loaded. Hard to explain...

##### Share on other sites

try

`window.onload = function() {document.getElementById("form1").date.value=startForm()};`

that worked so I put that into a separate function and called it in the window.onload and it works thanx for ur help

##### Share on other sites

What's the point in asking why something doesn't work, and then just going with the "that works, it'll do" approach..?

##### Share on other sites

but why do I have to do it that way and can't call the function that contains the same code? kuzz I need to use that getElementById code frequently throughout the lesson.

##### Share on other sites
Change:

`window.onload = startForm();`

To:

`window.onload = startForm;`

That will then assign the actual function, not the result of the function.

##### Share on other sites

try

`window.onload = function() {document.getElementById("form1").date.value=startForm()};`

that worked so I put that into a separate function and called it in the window.onload and it works thanx for ur help

##### Share on other sites

fugix, that is awful JavaScript.

##### Share on other sites

fugix, that is awful JavaScript.

the method he was using has been deprecated..no its not awful..where is your solution?

##### Share on other sites

I posted the solution?

-------------

`document.getElementById("form1").date.value=startForm()`

```function startForm()
{
document.forms[0].date.value = todayTxt();
}```

Why do you have the getElementById() call? Why are you setting date.value to the result of the function? The function he posted references the input itself. The only reason your code works, is exactly the same reason in contrast to why it wasn't working previously. The parenthesis on the end cause the execution of the function at that point of assignment, which in itself handles setting the value of the input to the return value of todayTxt(). The entire getElementById() call is redundant - bad JavaScript.

You either knew this behaviour was taking place, yet felt the need to create an additional reference to the object and wrapping the call within another function, instead of just calling todayTxt().. Or just tried a few variations and posted the first one you found to work, without any understanding and regardless of whether or not it's teaching people bad habits -- to perhaps try and look like you know something?

And as for "the method he was using has been deprecated" - I'm guessing you meant the capital "L", and that you actually meant is in-compliant with XHTML standards? HTML you'll find will support either. But this isn't HTML or XHTML, it's JS, and it's because the methods are case-sensitive that, that wouldn't work. Though that's clearly not what I was getting at anyway...

So yeah I stand by my comment.

##### Share on other sites

i answered his question...he's happy i'm sure...topic solved...moving on

##### Share on other sites

There's a principle difference between the OP being 'happy' and actually learning something, like these forums are intended to do. You're just teaching people bad habits left, right and centre.

##### Share on other sites

you taught him something and i answered his question...good teamwork

##### Share on other sites

If he'd asked.. "what's the logically inept way of making this work?" - then yeah, you answered his call.

##### Share on other sites

If he'd asked.. "what's the logically inept way of making this work?" - then yeah, you answered his call.

and if he asked...hey i want to know the logic behind what im doing even though I am in a hurry in school and I really dont care or have 2 hours to talk to someone about the logic instead of getting the answer that I want...you did a good job.

##### Share on other sites
why is this happening?

##### Share on other sites
that worked so I put that into a separate function and called it in the window.onload and it works thanx for ur help

##### Share on other sites

fugix, stop being defensive.  MrAdam was right: the answer you provided 'worked' but did so only because you exploited a fluke in JavaScript.  It's certainly not something that should be considered a passable solution, let alone a quality solution.  Part of what we do here is teach through example, specifically code example.  Your code shows exactly the wrong way to address the problem.  That the OP left happy isn't an indication of the quality of your code.  All it highlights is their ignorance on the matter.

We get that you enjoy being an active member of the community, and we do appreciate it.  Being a member of a community, any community, means being able to accept criticism and being able to accept, and learn from, errors.  Instead of saying "Well, it worked" you should really be telling yourself "Hmm...it worked, but it certainly wasn't a very well thought out solution.  Maybe I should hone my skills."

Passing along bad or poorly thought out solutions will bring criticism every time.  We wouldn't be doing our jobs if we didn't bring it up.  And while tact may not be our #1 concern, better to have feelings hurt here, in a safe environment, than with clients, co-workers, or bosses, where more than results matter, and bad code costs money.

All that being said, I'm locking this thread before it devolves further.

##### Share on other sites
This topic is now closed to further replies.

×

• #### Activity

• Chat
×
• Create New...