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文件

回答

相关问题