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

ええ、私はそれを得ることはありません。それは単純でなければならない。 –

使用して、コードを移動：

<!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つのテキスト入力にテキストを入力する必要があります。 –

ありがとうございました –

それは単純なものだ、ちょうど

<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にラップされたドキュメントの下部にコードを配置しましたが、それでも機能しません。たぶん私はあなたが言っていることを読んでミスしています。 –

<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ファイルでは機能しません

答えて

関連する問題