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

Question

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>

score 413 · Accepted Answer

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

var x = +y + +z;

score 157 · Accepted Answer

157

私はただ使用しますNumber()：

var i=2;  
var j=3;  
var k = Number(i) + Number(j); // 5

于 2013-12-10T14:02:10.183 に答える

score 31 · Accepted Answer

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

score 23 · Accepted Answer

parseInt(...)を使用しますが、必ず基数値を指定してください。そうしないと、いくつかのバグに遭遇します (文字列が「0」で始まる場合、基数は 8/8 などです)。

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

alert(x + y);

お役に立てれば！

score 14 · Accepted Answer

以下は、一般的な用語で役立つ場合があります。

まず、HTML フォームフィールドはtextに限定されます。値が数値のように見えるように苦労したとしても、これは特にテキストボックスに当てはまります。
第 2 に、JavaScript は、良くも悪くも、+演算子を 2 つの意味でオーバーロードしています: 数値の加算と文字列の連結です。連結優先なので、のような表現でも3+'4'連結として扱われます。
第 3 に、JavaScript は可能な場合と必要な場合に動的に型を変更しようとします。たとえば'2'*'3'、文字列を乗算できないため、両方の型を数値に変更します。それらの 1 つが互換性がない場合NaN、Not a Number が返されます。

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

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

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

有効な番号の後のものはすべて無視されます。文字列が数字として始まらない場合、どちらも失敗します。それからあなたは得るでしょうNaN。

フォームから数値を取得するための優れた一般的な手法は、次のようなものです。

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

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

var data=parseInt(form.elements['data'].value) || 0;

score 7 · Accepted Answer

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

var x = y + z;

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

var x = (y)+(z);

数値に対する操作を指定するには、parseInt を使用する必要があります。例：

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]

score 6 · Accepted Answer

6

単純

var result = parseInt("1") + parseInt("2");
console.log(result ); // Outputs 3

于 2015-01-15T09:07:23.867 に答える

score 3 · Accepted Answer

または、単に初期化することもできます

変数 x = 0; ( let x = 0; を使用する必要があります)

このようにして、連結せずに追加します。

score 2 · Accepted Answer

とても簡単です:

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

score 2 · Accepted Answer

これを試して：

<!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>

score 2 · Accepted Answer

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

score 1 · Accepted Answer

関数内の変数を解析してコードを作成します。

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

答え

score 1 · Accepted Answer

次のような数値である場合、正規表現で事前チェックを行うことができます

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;
  }

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

24 に答える 24

Related

Reference