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, Dec 08 '14 at 21:49
`pizza_total=document.getElementById("pizza")*pizza;` That won't work. — Jonathan, Dec 08 '14 at 21:50
What is `*pizza` supposed to do? What is `pizza`? Also, `document.getElementById("pizza")` returns the element, not its value. — gen_Eric, Dec 08 '14 at 21:50
Unrelated to your question, but your doctype should be ` `. The one you have is for HTML4, and the one in this comment is for HTML5. — Havvy, Dec 08 '14 at 21:51
@RocketHazmat, Pizza is a variable here consisting value of each pizza; it is supposed to get multiplied with number of pizzas. — Mistu4u, Dec 08 '14 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, Dec 08 '14 at 21:56
@Havvy, thanks for bringing it to notice. Will do necessary changes. — Mistu4u, Dec 08 '14 at 22:02

Shomz · Accepted Answer · 2014-12-08T22:03:32.213

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 08 '14 at 22:03

answered Dec 08 '14 at 21:54

Shomz

37,421
4
57
85

1

You should fetch values from an `input` tag with `.value`, not with `.innerHTML`. – jfriend00 Dec 08 '14 at 21:55
2

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt). Good job Shomz! – Jeff Noel Dec 08 '14 at 21:58
1

Yes, thank you for the addition, @JeffNoel! `150 * test.value` would probably work, but `parseInt` is always better. – Shomz Dec 08 '14 at 22:00
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? – Mistu4u Dec 08 '14 at 22:00
See the live example, you had one more error: `document.getElementById("total").value = pizza_total;` note we're again using `value` here, not `innerHTML`. – Shomz Dec 08 '14 at 22:04
@Shomz on a sidenote to the deleted answer: http://stackoverflow.com/a/338053/2407212 (I'll delete when read) – Jonathan Dec 08 '14 at 22:08
@Jonathan, no, leave it, it will be useful to people. I know about it already, I've already upvoted (who knows when) almost everything there. :) – Shomz Dec 08 '14 at 22:10

Jeff Noel · Answer 2 · 2014-12-08T22:00:51.307

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 08 '14 at 22:00

answered Dec 08 '14 at 21:52

Jeff Noel

7,500
4
40
66

The `pizza` is in scope. It's in the `var`s above the function. – gen_Eric Dec 08 '14 at 21:59
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! – Jeff Noel Dec 08 '14 at 22:00
2

upvoted for explaining `pareseInt(x,10)` in the comment of the above answer – Mistu4u Dec 08 '14 at 22:04
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. – Shomz Dec 08 '14 at 22:23
1

@Shomz As long as the question is answered I'm quite happy with the result. – Jeff Noel Dec 09 '14 at 14:11

score 3 · Answer 3 · edited Dec 08 '14 at 22:09

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

JS function is not getting called

3 Answers3