External Javascript Script Never Being Called

Question

I am trying to learn javascript with this simple exercise and I seemed to be stumped. I need to make a simple calculation when a quantity is put in 3 separate text boxes and call my function to calculate it but no number is returned. So a quantity is put into each box, here is my attempt:

function sum2()
{
      var one = document.getElementById("book_1").value;
      var two = document.getElementById("book_2").value;
      var three = document.getElementById("book_3").value;

      if ((one == "")||(two == "")||(three == ""))
      {
        alert ('Error', 'values missing');
      }
      else
      {
         var sum1 = one * 19.99;
         var sum2 = two * 86.00;
         var sum3 = three * 55.00;
         var sum = sum1 + sum2 + sum3;

         document.getElementById('output').value = sum;
         document.write(sum);
}

<?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>
    <title>Work</title>
    <script type="text/javascript" src="ex4.js"></script>
  </head>
  <body>
     <div id="container">
     <h2>Order Books Online</h2>
     <form action="" method="post" id=”frm”>
       <fieldset>
       <table border="0">
         <tr>
           <th>Book</th>
           <th>Quantity</th>
           <th>Price</th>
         </tr>
         <tr>
           <td>Basics of C++</td>
           <td><input type="text" size="3" id="book_1" /></td>
           <td>$19.99</td>
         </tr>
         <tr>
           <td>Program Development in Perl</td>
           <td><input type="text" size="3" id="book_2" /></td>
           <td>$86.00</td>
         </tr>
         <tr>
           <td>Advanced JavaScript</td>
           <td><input type="text" size="3" id="book_3" /></td>
           <td>$55.00</td>
         </tr>
       </table>
       <br /><br />
       <input type="submit" onclick="return sum2()" value="Place Order" id="sub" />
       </fieldset>
      </form>
     </div>
  </body>
</html>

I think I have the right code but maybe just missing something. My external javascript file is called ex4.js and is in the same folder as the html file. My function is right and I believe I am calling it correctly so I have no idea where I am going wrong with this and just want the sum to be returned!!

If the file is called ex.js then you're getting an error on your browser console telling you that the file ex4.js wasn't found. Always at least look at the browser console. — David
– David, Commented Jul 30, 2016 at 15:05
@lucyb: Still check the browser console. You've defined one function called sum2, but call two functions (sum() and sum2()). And when you call sum2() there are no values available for input. Use your browser's debugger, step through the code as it executes, you can see its exact behavior. — David
– David, Commented Jul 30, 2016 at 15:11

David · Accepted Answer · 2016-07-30 15:21:06Z

1

You're calling the function immediately when the page loads:

<script>
    document.write(sum2());
</script>

At that time, these elements have no values:

var one = document.getElementById("book_1").value;
var two = document.getElementById("book_2").value;
var three = document.getElementById("book_3").value;

Because the page is just loading, the user hasn't input any values yet.

You also attempt to call a function which doesn't exist here:

<input type="submit" onclick="sum()" value="Place Order" id="sub" />

That's where you should be calling the function you have:

<input type="submit" onclick="sum2()" value="Place Order" id="sub" />

You also have a syntax error here:

alert (Error, values missing);

Strings are supposed to have quotes around them:

alert ('Error', 'values missing');

You're also not doing anything with the result of the function:

<input type="submit" onclick="sum2()" value="Place Order" id="sub" />

If this function is handling the click event, then you should do two things:

Cancel the event so the form doesn't post
In the function, output the value to the page

Something like this:

<input type="submit" onclick="return sum2()" value="Place Order" id="sub" />

Then in the function you would return false after using your value:

document.getElementById('output').value = sum;
return false;

As a side note, you should also use the var keyword when declaring variables. That way they stay in local scope instead of window scope:

var sum1 = one * 19.99;
var sum2 = two * 86.00;
var sum3 = three * 55.00;
var sum = sum1 + sum2 + sum3;

Additionally, this is a great opportunity to familiarize yourself with the developer tools in your browser. You can monitor network requests (to ensure the external resources are even loaded in the first place), read error messages (when the browser is trying to tell you the problem), and place debugging breakpoints in your code to step through and see what's happening as it executes.

Debugging is always better than guessing.

answered Jul 30, 2016 at 15:21

David

221k42 gold badges246 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

lucyb Over a year ago

if I return false, isn't nothing ever going to be returned? I want to return the sum, a value

David Over a year ago

@lucyb: Returning false in this case stops the form submit event from happening, since you're clicking a submit button on a form, which by default will reload the page and reset everything you're doing. Why do you want to return the value anyway? Where in your code are you doing anything with the returned value? (Hint: Nowhere)

lucyb Over a year ago

when I debug, IE skips over my alert box and nothing happens (theres no alert message)

David Over a year ago

@lucyb: Did you fix the syntax errors? Is there an error on the console? When it "skips" that line, what specifically does it do?

lucyb Over a year ago

There is not error in the console, debugging simply hovers over it and goes to the next line despite not inputting any numbers into the field. All synxtax errors that you suggested have been fixed

|

Collectives™ on Stack Overflow

External Javascript Script Never Being Called

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related