2014-12-08 9 views
0

Вот мой код JSP:функция JS не вызывался

 <%@ 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 является следующее:

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

От Firebug Я понимаю, что моя функция JS не получает казнены , Возможно, это может быть причиной этой ошибки.

+0

Попробуйте использовать 'pizza_calculate = функция() {... ваша функция ...}' ' –

+4

pizza_total = document.getElementById ("пицца") * пицца,' Это не будет работать. – Jonathan

+0

Что такое '' пицца'? Что такое «пицца»? Кроме того, 'document.getElementById (" pizza ")' возвращает элемент, а не его значение. –

ответ

5

Это:

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

должно быть:

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

Или, так как у вас уже есть элемент как test переменной, просто:

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>

Обратите внимание, если вы хотите мгновенного обновления, вы можете использовать onkeyup вместо onchange.

+1

Вы должны получать значения из тега 'input' с' .value', а не с '.innerHTML'. – jfriend00

+0

Справа, право, спасибо! – Shomz

+2

Просто, чтобы помочь парню, который задал вопрос: 'parseInt (x, 10);' гарантирует, что отправляемое вами значение является целым числом по сравнению с базой 10. Дополнительная информация о [MDN] (https://developer.mozilla.org/EN-US/Docs/Web/JavaScript/Справка/Global_Objects/ParseInt). Хорошая работа Шомц! –

4

Вы только получаете DOMElement с пиццей ID, а не его стоимость. Попробуйте добавить .value, чтобы получить значение элемента. Как так:

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

«Пицца» находится в сфере. Он находится в 'var' над функцией. –

+0

Плохо, я исправлю это. Это было мое первое предположение после того, как оно вернуло «NaN».Тогда я понял, что он не получает значения. Подумайте, что это всегда исправлено! –

+2

для объяснения 'pareseInt (x, 10)' в комментарии к вышеуказанному ответу – Mistu4u

3

Другие люди указали на ряд проблем с вашего скрипта, но причина, что скрипт не работает, потому что у вас есть это:

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

обрабатывается до запуска скрипта загружается в конце вашего HTML.

pizza_calculate не определен.

Либо переместите ваш сценарий в начало, либо лучше, не встраивайте свои обработчики событий, а вместо этого используйте addEventListener.

function pizza_calculate() 
{ 
    /* body of pizza_calculate */ 
} 
var pizzaInput = document.getElementById("pizza"); 
pizzaInput.addEventListener("change", pizza_calculate, false); 
Смежные вопросы