Javascript not work at all

papillonstudios · June 2, 2011

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

I am loading this js file

/*
   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()
      Checks the form to ensure that all required fields have been
      entered by the user.

*/

window.onLoad = startForm();

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">
<head>
<!-- 
   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>
   <link href="gpsware.css" rel="stylesheet" type="text/css" />
   <script type="text/javascript" src="order.js"></script>
</head>

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

   <div id="links">
      <a href="#" class="newgroup">Home Page</a>
      <a href="#">Product Catalog</a>
      <a href="#">Order Form</a>
      <a href="#">Maps Online</a>
      <a href="#">Contact Us</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="#">G-Receiver I</a>
      <a href="#">G-Receiver II</a>
      <a href="#">G-Receiver III</a>
      <a href="#" class="newgroup">Downloads</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">
         <input class="text" id="date" name="date" size="11" value="mm-dd-yyyy" readonly="readonly" />
      </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>
                 <option value="149.50">G-Receiver I ($149.50)</option>
                 <option value="199.50">G-Receiver II ($199.50)</option>
                 <option value="249.50">G-Receiver III ($249.50)</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">
                 <input class="num" name="price" id="price" size="7" value="0.00" readonly="readonly" />
              </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">
                 <input class="num" name="ship" id="ship" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">Subtotal</td>
              <td class="outcell">
                 <input class="num" name="sub" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">Tax (5%)</td>
              <td class="outcell">
                 <input class="num" name="tax" id="tax" size="7" value="0.00" readonly="readonly" />
              </td>
           </tr>

           <tr>
              <td colspan="2" class="labelcell2">TOTAL</td>
              <td class="outcell">
                 <input class="num" name="tot" id="tot" size="7" value="0.00" readonly="readonly" />
              </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

Source File: file:///Volumes/Macintosh%20HD/Users/chadgregory/Desktop/Lessons/Javascript/Tutorial.05/tutorial/order.js

Line: 49

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

Error: document.forms.form1 is undefined

Source File: file:///Volumes/Macintosh%20HD/Users/chadgregory/Desktop/Lessons/Javascript/Tutorial.05/tutorial/order.js

Line: 49

I tried using getElementById and the console says it returns null

why is this happening?

fugix · June 2, 2011

change

window.onLoad = startForm();

to

window.onload = startForm();

lower case l

papillonstudios · June 2, 2011

nope that didn't work. anything else?

fugix · June 2, 2011

try

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

Adam · June 2, 2011

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

papillonstudios · June 2, 2011

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

Adam · June 2, 2011

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

papillonstudios · June 2, 2011

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.

Adam · June 2, 2011

Change:

window.onload = startForm();

To:

window.onload = startForm;

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

fugix · June 3, 2011

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

Glad that worked for you

Adam · June 3, 2011

fugix, that is awful JavaScript.

fugix · June 3, 2011

fugix, that is awful JavaScript.

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

Adam · June 3, 2011

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.

fugix · June 3, 2011

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

Adam · June 3, 2011

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.

fugix · June 3, 2011

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

Adam · June 3, 2011

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

fugix · June 3, 2011

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.

Adam · June 3, 2011

why is this happening?

fugix · June 3, 2011

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

KevinM1 · June 3, 2011

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.

Sign In

Javascript not work at all

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Important Information