CODEWITHSUNDEEP
javascript
Mistu4u
Mistu4u

Reputation: 5416

JS function is not getting called

Here is my JSP code:

       <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
           pageEncoding="ISO-8859-1"%>
       <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
       <html>
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
       <title>Order a PIZZA</title>

       </head>
       <body>
       <b>SUBIR'S JUST IN PIZZA</b><br>
       <i>All PIZZAs in just 30 minutes</i>
       <div align="left">
       Pizza=150/-<br>
       Garlic Bread=60/-<br>
       Soft drink=45/-<br>
       Extra Cheese=45/-<br>
       Tax=12.25%
       </div>
        <div align="right">
            Name:
            <input type="text"><br>
            Number of Pizza:
            <input type="text" id="pizza" onchange="pizza_calculate()"><br>
            Number of Garlic breads:
            <input type="text"><br>
            Number of Soft drinks::
            <input type="text"><br>
            Number of Extra cheese:
            <input type="text"><br>
            Total:
            <input type="text" id="total"><br>
            Tax:
            <input type="text"><br>
            <input type="button" value="reload">
            <input type="submit" value="submit">
            <script type="text/javascript" src="evaluate.js"></script>
        </div>
       </body>
       </html>

My evaluate.JS javascript is the following:

var price=0;
var tax=0;
var pizza=150;
var garlicBread=60;
var softdrink=45;
var extraCheese=45;
var pizza_total=0;
var softdrink_total=0;
function pizza_calculate()
{
var test=document.getElementById("pizza");
console.log(test);
pizza_total=document.getElementById("pizza")*pizza;
document.getElementById("total").innerHTML =pizza_total;
};

From Firebug I understand that my JS function is not getting executed. What might possibly be the reason for this error, please suggest.

Upvotes: 0

Views: 63

Answers (3)

Matt Burland
Matt Burland

Reputation: 45135

Other people have pointed out a number of problems with your script, but the reason your script isn't running is because you have this:

 <input type="text" id="pizza" onchange="pizza_calculate()"><br>

parsed before the script is loaded at the end of your html.

pizza_calculate isn't defined.

Either move your script to top, or better, don't inline your event handlers and instead use addEventListener instead.

function pizza_calculate()
{
    /* body of pizza_calculate */
}
var pizzaInput = document.getElementById("pizza");
pizzaInput.addEventListener("change", pizza_calculate, false);

Upvotes: 3

Shomz
Shomz

Reputation: 37701

This: 

pizza_total=document.getElementById("pizza")*pizza;

should be: 

var pizza_total = parseInt( document.getElementById("pizza").value, 10) * pizza;

Or, since you already have the element as a test variable, simply: 

var pizza_total = parseInt(test.value, 10) * pizza;

UPDATE

var price = 0;
var tax = 0;
var pizza = 150;
var garlicBread = 60;
var softdrink = 45;
var extraCheese = 45;
var pizza_total = 0;
var softdrink_total = 0;

function pizza_calculate() {
  var test = document.getElementById("pizza");
  var pizza_total = parseInt(test.value, 10) * pizza;
  document.getElementById("total").value = pizza_total;
};
<div align="right">
  Name:
  <input type="text">
  <br>Number of Pizza:
  <input type="text" id="pizza" onchange="pizza_calculate()">
  <br>Number of Garlic breads:
  <input type="text">
  <br>Number of Soft drinks::
  <input type="text">
  <br>Number of Extra cheese:
  <input type="text">
  <br>Total:
  <input type="text" id="total">
  <br>Tax:
  <input type="text">
  <br>
  <input type="button" value="reload">
  <input type="submit" value="submit">
</div>

Note, if you wish instant updates, you can use onkeyup instead of onchange.

Upvotes: 5

Jeff Noel
Jeff Noel

Reputation: 7618

You only grab the DOMElement with the ID Pizza, not its value. Try adding .value to get the element's value. Like so:

pizza_total= document.getElementById("pizza").value * pizza;

Upvotes: 4

Related Questions