2016-08-20 29 views
0

私はこれで簡単な数学をしようとしています。私が得た問題は、結果が決して表示されないということです。入力に値を追加

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script> 
    <script type="text/javascript" src="script.js"></script> 
    <title></title> 
</head> 
<body> 
    <form> 
     <input id="data1" type="number" name="data1"> 
     <br> 
     <input id="data2" type="number" name="data2"> 
     <br> 
     <input id="button" type="submit"> 
     <br> 
     <br> 
     <input id="result" type="number" name="result" value="1"> 
    </form> 
</body> 
</html> 

JS:ここで私は私の変数を得ました。式の結果は#result入力に表示されます。

$(document).ready(function(){ 

    var result = 0; 
    $("#result").val(result); 

    $("#button").click(function() { 

     var data1 = $("#data1").val(); 
     var data2 = $("#data2").val(); 

     result = $(data1 * data2); 

     $("#result").val(result); 

    }); 

}); 

答えて

0

resultはオブジェクト

result = $(data1 * data2); 

に変更、それを次のようになります。

result = data1 * data2; 

コードの残りの部分は正常に見えます。他のコメントにも示唆されているように、preventDefault()

$(document).ready(function(){ 
    var result = 0; 
    $("#result").val(result); 

    $("#button").click(function(evt) { 
     evt.preventDefault(); 
     var data1 = $("#data1").val(); 
     var data2 = $("#data2").val(); 

     result = data1 * data2;  
     $("#result").val(result); 
    }); 
}); 
+0

に電話を追加することを忘れないでください。ありがとう! – notooanon

2

防止デフォルトを追加すると、ページの送信と再読み込みが停止します。

$(document).ready(function(){ 

var result = 0; 
$("#result").val(result); 

$("#button").click(function(evt) { 
    evt.preventDefault(); 
    var data1 = $("#data1").val(); 
    var data2 = $("#data2").val(); 

    result = $(data1 * data2); 

    $("#result").val(result); 

}); 

}); 
0

formにはいくつかのデフォルトパラメータがあります。それは、たとえあなたのようにそれに何かを渡さなくても。たとえば、actionがあります。デフォルトは現在あなたのサイトに設定されています。したがって、送信ボタンをクリックすると、フォームは送信します(GETリクエスト - 別のデフォルトです)。どんなパラメータを渡しても問題ありません。これを行うフォームを防止する。 preventDefault()メソッドを使用できます。

$("#button").click(function(e) { 
    e.preventDefault(); 
    // ... rest of your code 
} 

これは本当にデータ/フォーム/自分自身を提出からフォームを停止します - あなたは、同じページ上のJSとその値を処理することができます。あなたの次の断片で

関連する問題