jquery窗體添加不工作在我的html文件

我有一個工作的jquery代碼http://jsfiddle.net/anderskitson/Efbfv/5/但在我的網站http://anderskitson.ca/tests/javascript/bottlesForm.html它不起作用我會包括下面的代碼，但我不明白爲什麼它不會加工。jquery窗體添加不工作在我的html文件

CODE

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Rat Recipes</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
    $('#the_input_id').keyup(function() { 
     updateTotal(); 
    }); 

    $('#the_input_id1').keyup(function() { 
     updateTotal(); 
    }); 

    $('#the_input_id2').keyup(function() { 
     updateTotal(); 
    }); 

    var updateTotal = function() { 
     var input1 = parseInt($('#the_input_id').val()); 
     var input2 = parseInt($('#the_input_id1').val()); 
     var input3 = parseInt($('#the_input_id2').val()); 
     if (isNaN(input1) || isNaN(input2)) { 
      $('#total').text(''); 
     } else { 
      var max = 500; 
      var total = input1 + (input2 * 2) + (input3 * 3); 

      if (total > max) { 
       $('#total').text('The maximum is ' + max); 
       $('#total1').val(500); 
      } else { 
       $('#total').text(total); 
       $('#total1').val(total); 
      } 


     } 
    }; 
    </script> 
    </head> 
    <body> 
     <form method="post"> 
     small bottles 
     <input type="text" id="the_input_id"> 
     medium bottles 
     <input type="text" id="the_input_id1"> 
     Large bottles 
     <input type="text" id="the_input_id2"> 
     <input type="text" id="total1"> 
    </form> 



    <div id="total"> 
    total: 
    </div> 
    </body> 
</html>

來源

2012-02-20 Cool Guy Yo

我用認爲這是完美的顯而易見，爲什麼「它不起作用」並不足以解釋問題。 StackOverflow一次又一次地證明了我的錯誤。 – Pointy 2012-02-20 00:32:57

是的，我只是不明白。這很簡單。 – 2012-02-20 00:35:19

使用下面的代碼，它會工作：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Rat Recipes</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 

    </head> 
    <body> 
     <form method="post"> 
     small bottles 
     <input type="text" id="the_input_id"> 
     medium bottles 
     <input type="text" id="the_input_id1"> 
     Large bottles 
     <input type="text" id="the_input_id2"> 
     <input type="text" id="total1"> 
    </form> 



    <div id="total"> 
    total: 
    </div> 
    <script> 
    $('#the_input_id').keyup(function() { 
     updateTotal(); 
    }); 

    $('#the_input_id1').keyup(function() { 
     updateTotal(); 
    }); 

    $('#the_input_id2').keyup(function() { 
     updateTotal(); 
    }); 

    var updateTotal = function() { 
     var input1 = parseInt($('#the_input_id').val()); 
     var input2 = parseInt($('#the_input_id1').val()); 
     var input3 = parseInt($('#the_input_id2').val()); 
     if (isNaN(input1) || isNaN(input2)) { 
      $('#total').text(''); 
     } else { 
      var max = 500; 
      var total = input1 + (input2 * 2) + (input3 * 3); 

      if (total > max) { 
       $('#total').text('The maximum is ' + max); 
       $('#total1').val(500); 
      } else { 
       $('#total').text(total); 
       $('#total1').val(total); 
      } 


     } 
    }; 
    </script> 
    </body> 
</html>

來源

2012-02-20 01:00:25

注意：您必須在查看輸出之前在3個文本輸入中輸入文本。 – 2012-02-20 01:01:03

謝謝你正是我想要的 – 2012-02-20 01:05:27

這是一個簡單的，只需移動

<script> 
/// with your code here to the end of the document as you're assigning events to elements before they're created or add 
</script> 



$(document).ready(function(){ 


/// your code here . . 


});

來源

2012-02-20 00:41:34

我將代碼放在document.ready文件的底部，但它仍然不起作用。也許我很想念你在說什麼。 – 2012-02-20 00:51:39

<body> 
    <form method="post"> 
    small bottles 
    <input type="text" id="the_input_id"> 
    medium bottles 
    <input type="text" id="the_input_id1"> 
    Large bottles 
    <input type="text" id="the_input_id2"> 
    <input type="text" id="total1"> 
</form> 



<div id="total"> 
total: 
</div> 
    <script> 
$(document).ready(function() { 

$('#the_input_id').keyup(function() { 
    updateTotal(); 
}); 

$('#the_input_id1').keyup(function() { 
    updateTotal(); 
}); 

$('#the_input_id2').keyup(function() { 
    updateTotal(); 
}); 

var updateTotal = function() { 
    var input1 = parseInt($('#the_input_id').val()); 
    var input2 = parseInt($('#the_input_id1').val()); 
    var input3 = parseInt($('#the_input_id2').val()); 
    if ((isNaN(input1) || input1 === undefined) || (isNaN(input2) || input2 === undefined) || (isNaN(input3) || input3 === undefined)){ 
     $('#total').text(''); 
    } else { 
     var max = 500; 
     var total = input1 + (input2 * 2) + (input3 * 3); 

     if (total > max) { 
      $('#total').text('The maximum is ' + max); 
      $('#total1').val(500); 
     } else { 
      $('#total').text(total); 
      $('#total1').val(total); 
     } 


    } 
}; 
}); 
</script> 
</body> 
</html>

來源

2012-02-20 01:11:00

jquery窗體添加不工作在我的html文件

回答

相關問題