Thêm hai số ghép chúng thay vì tính tổng

184

Tôi đang thêm hai số, nhưng tôi không nhận được giá trị chính xác.

Ví dụ: thực hiện 1 + 2trả về 12 chứ không phải 3

Tôi đang làm gì sai trong mã này?

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>

Mở rộng đoạn trích

javascript html

— ok bối rối
nguồn

Loại giá trị nào bạn mong đợi là đầu vào? Số nguyên hay số thập phân?

— Zorayr

1

Một giá trị nhập văn bản sẽ là chuỗi và chuỗi sẽ luôn luôn tiếp nhau thay vì bổ sung

— Hank

1

Một bài viết tốt về chuyển đổi là trong Câu trả lời này .

— akTed

1

Có thể trùng lặp Làm thế nào để thêm hai chuỗi như thể chúng là số?

— Biện hộ hữu cơ

Nếu bạn có một <input type="number">, bạn chỉ cần có được .valueAsNumbertài sản của nó trực tiếp.

— dùng4642212

340

Chúng thực sự là các chuỗi, không phải số. Cách dễ nhất để tạo một số từ một chuỗi là thêm vào đó bằng +:

var x = +y + +z;

— elclanrs
nguồn

4

vì tò mò (bản thân tôi không phải là lập trình viên JavaScript) (và tôi nghĩ rằng điều này sẽ cải thiện câu trả lời), +-prefix làm gì với chuỗi?

— Sebastian Mach

30

Đoạn mã trên hơi kỳ quái và sẽ gây nhầm lẫn cho các nhà phát triển ít dày dạn kinh nghiệm. Mã này cũng sẽ thất bại với JSLint vì sử dụng nhầm lẫn '+'.

— Zorayr

2

@phresnel: unary + toán tử

— akTed

10

@AKTed: Thật ra tôi muốn khiêu khích elclanrs để mô tả nó một chút trong câu trả lời của anh ấy. Tất nhiên tôi không thể tự tìm kiếm google; nhưng nó sẽ (imo) cải thiện chất lượng của câu trả lời, đặc biệt là vì sử dụng tiền tố- + để chuyển đổi chuỗi là khá phổ biến trong các ngôn ngữ lập trình khác và có thể gây nhầm lẫn cho người mới. (tuy nhiên, cảm ơn vì đã chia sẻ liên kết)

— Sebastian Mach

2

Tôi sẽ không khuyến khích bất cứ ai sử dụng phím tắt này. Tôi biết rằng thực sự phân tích một chuỗi thành một số đòi hỏi nhiều mã hơn nhưng ít nhất mã đó rõ ràng phù hợp với ý định.

— Si Kelly

130

Tôi chỉ sử dụng Number():

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

— gerard
nguồn

2

Tôi cứ mắc phải sai lầm này luôn luôn che giấu: var k += Number(i)

— John Phelps

Hữu ích, Cảm ơn

— Prasad Patel

29

Bạn cần sử dụng parseInt()phương thức của javaScript để biến các chuỗi trở lại thành số. Ngay bây giờ, chúng là các chuỗi để thêm hai chuỗi nối chúng, đó là lý do tại sao bạn nhận được "12".

— giảm nhẹ
nguồn

1

Tôi không chắc chắn parseInt()là tùy chọn tốt nhất ở đây vì chức năng của OP đang thêm hai "số" do người dùng nhập vào chứ không phải hai "số nguyên".

— nnnnnn

2

@nnnnnn Tôi nghĩ rằng, điều đó có thể dễ dàng được sửa đổi parseFloatnếu OP cung cấp thêm đầu vào.

— Yoshi

1

@Yoshi - Vâng, vâng, có thể, nhưng cho rằng câu trả lời không thực sự nói bất cứ nơi nào parseInt()chỉ trả về số nguyên và không giải thích bất kỳ parseInt()"quirks" nào - có thể là vấn đề với dữ liệu do người dùng nhập - Tôi nghĩ rằng nó đáng được đề cập. (Tôi thực sự không downvote hoặc bất cứ điều gì.)

— nnnnnn

Có, tôi đã đưa ra một giả định rằng đầu vào sẽ là số nguyên vì họ đã đưa ra ví dụ về 1 + 2, nhưng bạn đã đúng - parseFloat () có thể tốt hơn nếu chúng chỉ là bất kỳ 'số' nào.

— giảm nhẹ

22

Sử dụng parseInt (...) nhưng đảm bảo bạn chỉ định giá trị cơ số; nếu không, bạn sẽ gặp phải một số lỗi (nếu chuỗi bắt đầu bằng "0", cơ số là bát phân / 8, v.v.).

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

alert(x + y);

Hi vọng điêu nay co ich!

— Zorayr
nguồn

5

Tôi không chắc chắn parseInt()là tùy chọn tốt nhất ở đây vì chức năng của OP đang thêm hai "số" do người dùng nhập vào chứ không phải hai "số nguyên".

— nnnnnn

1

Trừ khi anh ấy mong đợi các giá trị dấu phẩy động, tôi nghĩ rằng sử dụng phương pháp này vẫn hiệu quả.

— Zorayr

1

Đây không còn là vấn đề trong ES6. Cơ số có thể được bỏ qua một cách an toàn. parseInt("012")hoạt động tốt, trở lại 12. Tất nhiên, bạn vẫn phải cẩn thận với những thứ như [1,2].map(parseInt).

6

Chỉ cần thêm một phương thức đúc kiểu đơn giản là đầu vào được lấy trong văn bản. Sử dụng như sau:

    var y = parseInt(document.getElementById("txt1").value);
    var z = parseInt(document.getElementById("txt2").value);
    var x = y + z;

— Vibhav Shreshth
nguồn

6

Sau đây có thể hữu ích trong điều khoản chung.

Đầu tiên, các trường mẫu HTML được giới hạn trong văn bản . Điều đó đặc biệt áp dụng cho các hộp văn bản, ngay cả khi bạn đã chịu khó để đảm bảo rằng giá trị trông giống như một con số.
Thứ hai, JavaScript, tốt hơn hoặc xấu hơn, đã làm quá tải +toán tử với hai ý nghĩa: nó thêm số và nó nối chuỗi. Nó có sở thích ghép nối, do đó, ngay cả một biểu thức như thế 3+'4'cũng sẽ được coi là nối.
Thứ ba, JavaScript sẽ cố gắng thay đổi các loại động nếu có thể và nếu cần. Ví dụ: '2'*'3'sẽ thay đổi cả hai loại thành số, vì bạn không thể nhân chuỗi. Nếu một trong số chúng không tương thích, bạn sẽ nhận được NaN, Không phải là Số.

Vấn đề của bạn xảy ra bởi vì dữ liệu đến từ biểu mẫu được coi là một chuỗi và +do đó sẽ được nối thay vì thêm.

Khi đọc dữ liệu được cho là số từ một biểu mẫu, bạn phải luôn đẩy nó qua parseInt()hoặc parseFloat(), tùy thuộc vào việc bạn muốn số nguyên hay số thập phân.

Lưu ý rằng không có hàm nào thực sự chuyển đổi một chuỗi thành một số. Thay vào đó, nó sẽ phân tích chuỗi từ trái sang phải cho đến khi nó đến một ký tự số không hợp lệ hoặc đến cuối và chuyển đổi những gì đã được chấp nhận. Trong trường hợpparseFloat , bao gồm một dấu thập phân, nhưng không phải hai.

Bất cứ điều gì sau khi số hợp lệ chỉ đơn giản là bỏ qua. Họ thất bại nếu chuỗi thậm chí không bắt đầu như một số. Rồi bạn sẽ nhận được NaN.

Một kỹ thuật mục đích chung tốt cho các số từ các hình thức là như thế này:

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

Nếu bạn chuẩn bị kết hợp một chuỗi không hợp lệ thành 0, bạn có thể sử dụng:

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

— Manngo
nguồn

5

Đơn giản

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

— Murtaza Khursheed Hussain
nguồn

4

Điều này sẽ không tổng hợp số lượng; thay vào đó nó sẽ nối nó:

var x = y + z;

Bạn cần phải làm:

var x = (y)+(z);

Bạn phải sử dụng parseInt để chỉ định thao tác trên các số. Thí dụ:

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

— Pushp Singh
nguồn

Đây phải là câu trả lời chính xác cho additionvà subtractionkhông phải là câu trả lời được chấp nhận.

— MR_AMDEV

3

Mã này tổng hợp cả hai biến! Đặt nó vào chức năng của bạn

var y = parseInt(document.getElementById("txt1").value);
var z = parseInt(document.getElementById("txt2").value);
var x = (y +z);
document.getElementById("demo").innerHTML = x;`

— taha
nguồn

1

Bạn đang thiếu chuyển đổi loại trong bước bổ sung ...
var x = y + z;nênvar 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>

— chia sẻ
nguồn

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>

— Ahmad Ajaj
nguồn

3

Thêm một số giải thích với câu trả lời về cách câu trả lời này giúp OP khắc phục vấn đề hiện tại

— ρяσѕρєя K

1

Nó rất đơn giản:

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

— Peter Mortensen
nguồn

1

Thử cái này:

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

— Mohammed Ebrahim
nguồn

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>

— Lakshmi
nguồn

3

Chào mừng đến với SO! Bạn có thể vui lòng giải thích thêm một chút không? Câu trả lời của bạn chỉ là mã, vì vậy nó có thể hoạt động, nhưng người hỏi (hoặc khách truy cập khác!) Có thể không hiểu tại sao nó hoạt động.

— Chilion

1

Nếu chúng ta có hai trường đầu vào thì hãy lấy các giá trị từ các trường đầu vào, sau đó thêm chúng bằng 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);
});

— Asad Ali
nguồn

0

Bạn có thể thực hiện một precheck với biểu thức thông thường mà chúng là những con số như

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

— Ram
nguồn

Thay vì các biểu thức thông thường, bạn chỉ có thể sử dụng parseXX và kiểm tra trả về NaN.

— Hank

Xác thực dữ liệu do người dùng nhập luôn là một kế hoạch tốt, nhưng bạn vẫn cần chuyển đổi các chuỗi đầu vào thành dạng số trước khi bạn có thể thực hiện bổ sung số.

— nnnnnn

0

Sử dụng parseFloatnó sẽ chuyển đổi chuỗi thành số bao gồm các giá trị thập phân.

 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>

— Poorna Rao
nguồn

0

Bạn cũng có thể viết: var z = x - -y; Và bạn nhận được câu trả lời đúng.

<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
nguồn

0

Đây là mã của bạn bằng cách phân tích các biến trong hàm.

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

Câu trả lời

— Manoj Krishna
nguồn

-2

Một giải pháp thay thế, chỉ chia sẻ :):

var result=eval(num1)+eval(num2);

— dùng3201772
nguồn

Không phải là tốt như sử dụng plugin số học jQuery , nhưng tôi thích nó.

— Paul Draper