JS function is not getting called

Question

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.

Try using pizza_calculate = function() { ...your function...} — Jamie Counsell
– Jamie Counsell, Commented Dec 8, 2014 at 21:49
pizza_total=document.getElementById("pizza")*pizza; That won't work. — Jonathan
– Jonathan, Commented Dec 8, 2014 at 21:50
What is *pizza supposed to do? What is pizza? Also, document.getElementById("pizza") returns the element, not its value. — gen_Eric
– gen_Eric, Commented Dec 8, 2014 at 21:50
@RocketHazmat, Pizza is a variable here consisting value of each pizza; it is supposed to get multiplied with number of pizzas. — Mistu4u
– Mistu4u, Commented Dec 8, 2014 at 21:53
"From Firebug I understand that my JS function is not getting executed." what does that mean? What happens? Do you have error messages? If you do, maybe that would be helpful to include in your question? — Matt Burland
– Matt Burland, Commented Dec 8, 2014 at 21:56

Shomz · Accepted Answer · 2014-12-08 22:03:32Z

5

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.

edited Dec 8, 2014 at 22:03

answered Dec 8, 2014 at 21:54

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

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

7 Comments

jfriend00 Over a year ago

You should fetch values from an input tag with .value, not with .innerHTML.

Jeff Noel Over a year ago

Just to help the guy who asked the question: parseInt(x,10); makes sure the value you send is an integer compared on base 10. More info on MDN. Good job Shomz!

Shomz Over a year ago

Yes, thank you for the addition, @JeffNoel! 150 * test.value would probably work, but parseInt is always better.

Mistu4u Over a year ago

My intenetion was to autopopulate the total value of pizzas ordered in the total textbox. However still after doing the modifications it is not getting populated. Why is that?Any idea?

Shomz Over a year ago

See the live example, you had one more error: document.getElementById("total").value = pizza_total; note we're again using value here, not innerHTML.

|

Jeff Noel · Accepted Answer · 2014-12-08 22:00:51Z

4

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;

edited Dec 8, 2014 at 22:00

answered Dec 8, 2014 at 21:52

Jeff Noel

7,6274 gold badges43 silver badges67 bronze badges

5 Comments

gen_Eric Over a year ago

The pizza is in scope. It's in the vars above the function.

Jeff Noel Over a year ago

My bad, I'll fix that. That was my first assumption after it returned NaN. Then I realized he wasn't getting the value. Consider it's always fixed!

Mistu4u Over a year ago

upvoted for explaining pareseInt(x,10) in the comment of the above answer

Shomz Over a year ago

Hmm, now I see you answered this correctly two minutes before I did. Not sure why I didn't see it when I was writing an answer. Yours should be accepted (even without the parseInt). At least I gave you an upvote.

Jeff Noel Over a year ago

@Shomz As long as the question is answered I'm quite happy with the result.

Havvy · Accepted Answer · 2014-12-08 22:09:04Z

3

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);

edited Dec 8, 2014 at 22:09

Havvy

1,51115 silver badges29 bronze badges

answered Dec 8, 2014 at 22:04

Matt Burland

45.3k18 gold badges110 silver badges182 bronze badges

Collectives™ on Stack Overflow

JS function is not getting called

3 Answers 3

7 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related