2つの数値を加算すると、合計を計算する代わりにそれらを連結します

184

2つの数値を加算していますが、正しい値が得られません。

たとえば、実行1 + 2すると3ではなく12が返されます。

このコードで何が間違っていますか？

function myFunction() {
  var y = document.getElementById("txt1").value;
  var z = document.getElementById("txt2").value;
  var x = y + z;
  document.getElementById("demo").innerHTML = x;
}
<p>
  Click the button to calculate x.
  <button onclick="myFunction()">Try it</button>
</p>
<p>
  Enter first number:
  <input type="text" id="txt1" name="text1" value="1">
  Enter second number:
  <input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
スニペットを展開

javascript  html 
— 混乱した
ソース
どのタイプの値を入力として期待していますか？整数か小数か？
— Zorayr 2013年
1
入力値は、文字列と文字列になるテキストは常にほかの代わりに連結します
— ハンク
1
変換についての良い記事はこのAnswerにあります。
— 2013年
1
— Organic Advocate
がある場合は、<input type="number">その.valueAsNumberプロパティを直接取得できます。
— user4642212 2018

回答:

343

それらは実際には数字ではなく文字列です。文字列から数値を生成する最も簡単な方法は、文字列の先頭に+：

var x = +y + +z;
— Elclanrs
ソース
4
好奇心から（私自身はJavaScriptプログラマーではありません）（そして、これで答えが改善されると思います）、- +prefixは文字列に対して何をしますか？
— セバスチャンマッハ
30
上記のコードは少し奇妙で、経験の少ない開発者を混乱させます。「+」の混乱を招く使用のために、コードはJSLintも失敗します。
— Zorayr 2013年
2
@phresnel：単項+演算子
— 2013年
10
@AKTed：実際、私はelclanrsを挑発して彼の回答の中で少し説明したかったのです。もちろん、自分でグーグル検索をすることはできません。ただし、（imo）答えの質が向上します。特に、文字列変換にprefix- +を使用することは他のプログラミング言語では非常に珍しく、初心者を混乱させる可能性があるためです。（ただし、リンクを共有していただきありがとう
— セバスチャンマッハ
2
このショートカットはだれにも使わないようにします。文字列を数値に実際に解析するにはより多くのコードが必要ですが、少なくともコードは意図と明らかに一致しています。
— Si Kelly
29

parseInt()文字列を数値に戻すには、javaScriptのメソッドを使用する必要があります。現在、これらは文字列であるため、2つの文字列を追加すると連結されます。そのため、「12」になります。

— ミティム
ソース
1
parseInt()OPの機能が2つの「整数」ではなく2つのユーザー入力の「数値」を追加していることを考えると、ここでの最良のオプションはわかりません。
— nnnnnn 2013年
2
@nnnnnn parseFloatOPがより多くの入力を提供すれば、それは簡単に修正できると思います。
— Yoshi
1
@Yoshi-はい、可能ですが、答えが実際にparseInt()は整数のみを返す場所を何も言わずparseInt()、ユーザーの入力データに問題がある可能性がある「奇妙な問題」のいずれも説明していない場合-私は言及する価値があると思った。（私は実際には反対投票もしていませんでした。）
— nnnnnn
はい、私は1 + 2の例を示しているので、入力は整数であると想定していましたが、そうです-parseFloat（）が単なる「数値」である場合は、より良いかもしれません。
— mitim
22

parseInt（...）を使用しますが、基数の値を指定してください。そうしないと、いくつかのバグに遭遇します（ストリングが「0」で始まる場合、基数は8進/ 8などです）。

var x = parseInt(stringValueX, 10);
var y = parseInt(stringValueY, 10);

alert(x + y);

お役に立てれば！

— ゾライア
ソース
5
parseInt()OPの機能が2つの「整数」ではなく、2つのユーザー入力の「数値」を追加していることを考えると、ここでの最良のオプションはわかりません。
— nnnnnn 2013年
1
彼が浮動小数点値を期待しているのでない限り、私はこのアプローチを使用することは依然としてうまくいくと思います。
— Zorayr 2013年
1
これは、ES6では問題ではなくなりました。基数は安全に省略できます。parseInt("012")正常に動作し、12が返されます。もちろん、などのことに注意する必要があり[1,2].map(parseInt)ます。
6

入力がテキストで取得されるため、単純な型キャストメソッドを追加するだけです。以下を使用します。

    var y = parseInt(document.getElementById("txt1").value);
    var z = parseInt(document.getElementById("txt2").value);
    var x = y + z;
— ビバブ・シュレシュ
ソース
6

以下は一般的な用語で役立ちます。

  • まず、HTMLフォームフィールドはテキストに限定されます。これは、特にテキストボックスに当てはまります。たとえ値が数字のように見えるように努力したとしてもです。

  • 第2に、JavaScriptは、良くも悪くも、+演算子に2つの意味をオーバーロードしました。数値を追加することと、文字列を連結することです。連結が優先されるため、などの式でも3+'4'連結として扱われます。

  • 3番目に、JavaScriptは、可能であれば、必要に応じて、型を動的に変更しようとします。たとえば'2'*'3'、文字列を掛けることはできないため、両方のタイプを数値に変更します。それらの1つに互換性がない場合NaN、「Not a Number」が表示されます。

問題は、フォームからのデータが文字列と見なされ、 +。したがっては追加ではなく連結します。

フォームからおそらく数値データを読み取るときは、常にそれをプッシュするparseInt()か、parseFloat()、整数または小数のどちらが必要かによって、あります。

どちらの関数も文字列を数値に実際に変換しないことに注意してください。代わりに、無効な数字または最後に到達するまで文字列を左から右に解析し、受け入れられたものを変換します。の場合parseFloat小数点は2つではなく1つ含まれます。

有効な数値以降は無視されます。文字列が数字で始まっていない場合でも失敗します。その後、あなたは得るでしょうNaN。

フォームからの数値の優れた汎用技術は、次のようなものです。

var data=parseInt(form.elements['data'].value); //  or parseFloat

無効な文字列を0に合体する準備ができている場合は、次を使用できます。

var data=parseInt(form.elements['data'].value) || 0;
— マンゴー
ソース
4

これは数を合計しません。代わりにそれを連結します：

var x = y + z;

あなたがする必要があります：

var x = (y)+(z);

数値の演算を指定するには、parseIntを使用する必要があります。例：

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
— Pushp Singh
ソース
これは正解でadditionありsubtraction、受け入れられたものではありません。
— MR_AMDEV
3

このコードは両方の変数を合計します！あなたの関数に入れてください

var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`
— タハ
ソース
1

あなたは、添加ステップの間、型変換が欠落している...
var x = y + z;する必要がありますvar x = parseInt(y) + parseInt(z);

 <!DOCTYPE html>

 <html>
 <body>
  <p>Click the button to calculate x.</p>
  <button onclick="myFunction()">Try it</button>
  <br/>
  <br/>Enter first number:
  <input type="text" id="txt1" name="text1">Enter second number:
  <input type="text" id="txt2" name="text2">
  <p id="demo"></p>
 <script>
    function myFunction() 
    {
      var y = document.getElementById("txt1").value;
      var z = document.getElementById("txt2").value;
      var x = parseInt(y) + parseInt(z);
      document.getElementById("demo").innerHTML = x;
    }
 </script>
 </body>
 </html>
— シャージル
ソース
1 
  <input type="text" name="num1" id="num1" onkeyup="sum()">
  <input type="text" name="num2" id="num2" onkeyup="sum()">
  <input type="text" name="num2" id="result">

  <script>
     function sum()
     {

        var number1 = document.getElementById('num1').value;
        var number2 = document.getElementById('num2').value;

        if (number1 == '') {
           number1 = 0
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }
        else if(number2 == '')
        {
           number2 = 0;
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }
        else
        {
           var num3 = parseInt(number1) + parseInt(number2);
           document.getElementById('result').value = num3;
        }

     }
  </script>
— アフマドアジャジ
ソース
3
現在の問題を修正する方法で、この答えのヘルプOPのための答えを持ついくつかの説明を追加
— ρяσѕρєяK
1

とても簡単です：

<html>

    <body>
        <p>Click the button to calculate x.</p>
        <button onclick="myFunction()">Try it</button>
        <br/>
        <br/>Enter first number:
        <input type="text" id="txt1" name="text1">Enter second number:
        <input type="text" id="txt2" name="text2">
        <p id="demo"></p>

        <script>
            function myFunction() {
                var y = document.getElementById("txt1").value;
                var z = document.getElementById("txt2").value;
                var x = +y + +z;
                document.getElementById("demo").innerHTML = x;
            }
        </script>
    </body>
</html>
— ピーターモーテンセン
ソース
1

これを試して：

<!DOCTYPE html>
<html>

    <body>
        <p>Add Section</p>

        <label>First Number:</label>
        <input id="txt1"  type="text"/><br />
        <label>Second Number:</label>
        <input id="txt2"  type="text"/><br />

        <input type="button" name="Add" value="Add" onclick="addTwoNumber()"/>
        <p id="demo"></p>

        <script>
            function myFunction() {
                document.getElementById("demo").innerHTML = Date();
            }

            function addTwoNumber(){
                var a = document.getElementById("txt1").value;
                var b = document.getElementById("txt2").value;

                var x = Number(a) + Number(b);
                document.getElementById("demo").innerHTML = "Add Value: " + x;
            }
        </script>
    </body>
</html>
— モハメッドエブラヒム
ソース
1 
    <head>
        <script type="text/javascript">
            function addition()
            {
                var a = parseInt(form.input1.value);
                var b = parseInt(form.input2.value);
                var c = a+b
                document.write(c);
            }
        </script>
    </head>

    <body>
        <form name="form" method="GET">
        <input type="text" name="input1" value=20><br>
        <input type="text" name="input2" value=10><br>
        <input type="button" value="ADD" onclick="addition()">
        </form>
    </body>
</html>
— ラクシュミ
ソース
3
SOへようこそ！もう少し説明してもらえますか？あなたの答えはコードだけなので、うまくいくかもしれませんが、質問者（または他の訪問者！）はなぜそれがうまくいくのか理解できないかもしれません。
— Chilion
1

2つの入力フィールドがある場合は、入力フィールドから値を取得し、JavaScriptを使用してそれらを追加します。

$('input[name="yourname"]').keyup(function(event) {
    /* Act on the event */
    var value1 = $(this).val();
    var value2 = $('input[name="secondName"]').val();
    var roundofa = +value2+ +value1;

    $('input[name="total"]').val(addition);
});
— アサドアリ
ソース
0

あなたはそれらが次のような数字である正規表現で事前チェ​​ックを行うことができます 

function myFunction() {
    var y = document.getElementById("txt1").value;
    var z = document.getElementById("txt2").value;
    if((x.search(/[^0-9]/g) != -1)&&(y.search(/[^0-9]/g) != -1))
      var x = Number(y)+ Number(z);
    else
      alert("invalid values....");
    document.getElementById("demo").innerHTML = x;
  }
— 羊
ソース
正規表現の代わりに、parseXXを使用してNaNが返されるかどうかを確認できます。
— 2013年
ユーザーが入力したデータの検証は常に適切な計画ですが、数値の加算を行う前に、入力文字列を数値形式に変換する必要があります。
— nnnnnn 2013年
0

使用parseFloatそれは小数点以下の値を含む文字列を数値に変換します。

 function myFunction() {
      var y = document.getElementById("txt1").value;
      var z = document.getElementById("txt2").value;
      var x = parseFloat(y) + parseFloat(z);
      document.getElementById("demo").innerHTML = x;
    }


<p>
  Click the button to calculate x.
  <button onclick="myFunction()">Try it</button>
</p>
<p>
  Enter first number:
  <input type="text" id="txt1" name="text1" value="1">
  Enter second number:
  <input type="text" id="txt2" name="text2" value="2">
</p>
<p id="demo"></p>
— プオルナラオ
ソース
0

次のように書くこともできます。var z = x--y; そして、あなたは正しい答えを得ます。

<body>

<input type="text" id="number1" name="">
<input type="text" id="number2" name="">
<button type="button" onclick="myFunction()">Submit</button>

<p id="demo"></p>

    <script>
    function myFunction() {
        var x, y ;

        x = document.getElementById('number1').value;
        y = document.getElementById('number2').value;

        var z = x - -y ;

        document.getElementById('demo').innerHTML = z;
    }
    </script>
</body>
— PA010
ソース
0

ここでは、関数の変数を解析してコードを記述します。

<html>
  <body>
    <p>Click the button to calculate x.</p>
    <button onclick="myFunction()">Try it</button>
    <br/>
    <br/>Enter first number:
    <input type="text" id="txt1" name="text1">
    <br>Enter second number:
    <input type="text" id="txt2" name="text2">
    <p id="demo"></p>
    <script>
      function myFunction() {
        var y = parseInt(document.getElementById("txt1").value);
        var z = parseInt(document.getElementById("txt2").value);
        var x = y + z;
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>

回答

ここに画像の説明を入力してください

— マノジ・クリシュナ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.