2017-11-05 3 views
-2

JavaScriptを使って簡単な計算機を作ろうとしていて、テキストボックスの結果で何も得られませんでした。私は単純なJavaScript計算機で結果を得なかった

<html> 
 
      <head> 
 
       <script type="text/javascript"> 
 
        function sum() 
 
        { 
 
        var x1 = document.getElementById("text1"); 
 
        var x2 = document.getElementById("text2"); 
 
        var y = document.getElementById("text3"); 
 
        
 
        var sum = parseFloat(x1) + parseFloat(x2); 
 
         
 
         y.value = "the result is, " + sum; 
 
        } 
 
       
 
       </script> 
 
      </head> 
 
      <body> 
 
      <form> 
 
       <fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;"> 
 
        <legend> sum +++ +++ calculator</legend> 
 
        <input type="text" placeholder="tap first number" id="text1"><br> 
 
        
 
        <input type="text" placeholder="tap second number" id="text2"><br> 
 
        
 
        <input type="button" value="=" onclick="sum()"><br> 
 
        
 
        <input type="text" placeholder="result" id="text3"><br> 
 
         </fieldset> 
 
       </form> 
 
      </body> 
 
     </html>

答えて

2

あなたのx1とx2は、入力ボックスにではなく、値を参照してください。変更:

var x1 = document.getElementById("text1").value; 
var x2 = document.getElementById("text2").value; 
1

理由は、テキストフィールドから値を取得していないためです。

以下のチェック:

function sum() { 
 
    var x1 = document.getElementById("text1"); 
 
    var x2 = document.getElementById("text2"); 
 
    var y = document.getElementById("text3"); 
 

 
    var sum = parseFloat(x1.value) + parseFloat(x2.value); 
 

 
    y.value = "the result is, " + sum; 
 
}
<form> 
 
    <fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;"> 
 
    <legend> sum +++ +++ calculator</legend> 
 
    <input type="text" placeholder="tap first number" id="text1"> 
 
    <br> 
 

 
    <input type="text" placeholder="tap second number" id="text2"> 
 
    <br> 
 

 
    <input type="button" value="=" onclick="sum()"> 
 
    <br> 
 

 
    <input type="text" placeholder="result" id="text3"> 
 
    <br> 
 
    </fieldset> 
 

 
</form>

は、それはあなたのお役に立てば幸いです。 ありがとう!

0

<html> 
 
      <head> 
 
       <script type="text/javascript"> 
 
        function sum() 
 
        { 
 
        var x1 = document.getElementById("text1"); 
 
        var x2 = document.getElementById("text2"); 
 
        var y = document.getElementById("text3"); 
 
        
 
        var sum = parseFloat(x1.value) + parseFloat(x2.value); 
 
       
 
         
 
         y.value = "the result is, " + sum; 
 
        } 
 
       
 
       </script> 
 
      </head> 
 
      <body> 
 
      <form> 
 
       <fieldset style="width : 100px ;text-align: center; margin-left: auto;margin-right: auto;"> 
 
        <legend> sum +++ +++ calculator</legend> 
 
        <input type="text" placeholder="tap first number" id="text1"><br> 
 
        
 
        <input type="text" placeholder="tap second number" id="text2"><br> 
 
        
 
        <input type="button" value="=" onclick="sum()"><br> 
 
        
 
        <input type="text" placeholder="result" id="text3"><br> 
 
         </fieldset> 
 
       </form> 
 
      </body> 
 
     </html>

関連する問題