การเพิ่มตัวเลขสองตัวต่อกันแทนการคำนวณผลรวม

184

ฉันกำลังเพิ่มตัวเลขสองตัว แต่ไม่ได้รับค่าที่ถูกต้อง

ตัวอย่างเช่นการ1 + 2ส่งคืน 12 และไม่ใช่ 3

ฉันทำอะไรผิดในรหัสนี้?

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

— okconfused
แหล่งที่มา

คุณคาดหวังว่าค่าประเภทใดเป็นอินพุต จำนวนเต็มหรือทศนิยม?

— Zorayr

1

ค่าป้อนข้อความจะเป็นสตริงและสตริงจะต่อกันแทนการเติมเสมอ

— แฮงค์

1

บทความที่ดีเกี่ยวกับการแปลงอยู่ในคำตอบนี้

— akTed

1

ซ้ำกันเป็นไปได้ของวิธีการเพิ่มสองสายราวกับว่าพวกเขาเป็นตัวเลข?

— ผู้ให้การสนับสนุนอินทรีย์

หากคุณมี<input type="number">คุณสามารถได้รับ.valueAsNumberทรัพย์สินโดยตรง

— user4642212

343

จริง ๆ แล้วมันคือสตริงไม่ใช่ตัวเลข วิธีที่ง่ายที่สุดในการสร้างตัวเลขจากสตริงคือการเติมด้วย+:

var x = +y + +z;

— elclanrs
แหล่งที่มา

4

จากความอยากรู้อยากเห็น (ฉันไม่ใช่โปรแกรมเมอร์ JavaScript) (และฉันคิดว่านี่จะช่วยปรับปรุงคำตอบ) - +คำนำหน้าทำอะไรกับสตริงได้บ้าง

— เซบาสเตียนมัค

30

รหัสข้างต้นเป็นบิตที่แปลกประหลาดและจะสับสนนักพัฒนาช่ำชองน้อย รหัสจะล้มเหลวด้วย JSLint เนื่องจากการใช้ '+' ทำให้สับสน

— Zorayr

2

@phresnel: ผู้ประกอบการ unary +

— akTed

10

@ AKTed: จริง ๆ แล้วฉันต้องการกระตุ้น elclanrs เพื่ออธิบายเล็กน้อยในคำตอบของเขา แน่นอนฉันไม่สามารถทำการค้นหาด้วยตัวเองของ google; แต่มันจะ (imo) ปรับปรุงคุณภาพของคำตอบโดยเฉพาะอย่างยิ่งเพราะการใช้คำนำหน้า - + สำหรับการแปลงสตริงเป็นเรื่องแปลกในภาษาโปรแกรมอื่น ๆ และอาจสับสนมือใหม่ (อย่างไรก็ตามขอขอบคุณสำหรับการแบ่งปันลิงก์)

— เซบาสเตียนมัค

2

ฉันจะกีดกันทุกคนจากการใช้ทางลัดนี้ ฉันรู้ว่าจริง ๆ แล้วการแยกสตริงเป็นตัวเลขต้องใช้รหัสมากกว่า แต่อย่างน้อยรหัสก็ตรงกับความตั้งใจ

— Si Kelly

130

ฉันแค่ใช้Number():

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

— เจอราร์ด
แหล่งที่มา

2

ฉันทำผิดพลาดไปเรื่อย ๆ ซึ่งมักจะเป็นข้อตกลงร่วมกัน: var k += Number(i)

— John Phelps

มีประโยชน์, ขอบคุณ

— Prasad Patel

29

คุณต้องใช้parseInt()วิธีการของจาวาสคริปต์เพื่อเปลี่ยนสตริงกลับเป็นตัวเลข ตอนนี้พวกเขาเป็นสายอักขระดังนั้นการเพิ่มสองสายเข้าด้วยกันซึ่งเป็นสาเหตุที่คุณได้รับ "12"

— mitim
แหล่งที่มา

1

ฉันไม่แน่ใจว่าparseInt()เป็นตัวเลือกที่ดีที่สุดที่นี่เนื่องจากฟังก์ชั่นของ OP คือการเพิ่ม "ตัวเลข" ที่ผู้ใช้ป้อนสองไม่ใช่สองจำนวนเต็ม

— nnnnnn

2

@nnnnn ฉันคิดว่ามันสามารถแก้ไขได้อย่างง่ายดายparseFloatหาก OP ให้ข้อมูลเพิ่มเติม

— Yoshi

1

@Yoshi - ใช่มันทำได้ แต่เนื่องจากคำตอบไม่ได้บอกว่าจริง ๆ แล้วparseInt()คืนค่าจำนวนเต็มเท่านั้นและไม่อธิบายparseInt()"quirks" ใด ๆซึ่งอาจเป็นปัญหากับข้อมูลที่ผู้ใช้ป้อน - ฉัน คิดว่ามันคุ้มค่าที่จะพูดถึง (ผมไม่ได้จริง downvote หรืออะไร.)

— nnnnnn

ใช่ฉันได้ตั้งสมมุติฐานว่าอินพุตจะเป็นจำนวนเต็มเนื่องจากพวกเขายกตัวอย่างของ 1 + 2 แต่คุณพูดถูก - parseFloat () อาจจะดีกว่าถ้าพวกเขาเป็นเพียง 'ตัวเลข'

— mitim

22

ใช้parseInt (... )แต่ให้แน่ใจว่าคุณระบุค่า radix; มิฉะนั้นคุณจะพบข้อบกพร่องหลายอย่าง (ถ้าสตริงขึ้นต้นด้วย "0", ฐานคือฐานแปด / 8 เป็นต้น)

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

alert(x + y);

หวังว่านี่จะช่วยได้!

— Zorayr
แหล่งที่มา

5

ฉันไม่แน่ใจว่าparseInt()เป็นตัวเลือกที่ดีที่สุดที่นี่เนื่องจากฟังก์ชั่นของ OP คือการเพิ่ม "ตัวเลข" ที่ผู้ใช้ป้อนสองไม่ใช่สองจำนวนเต็ม

— nnnnnn

1

ฉันคิดว่าการใช้วิธีการนี้ยังคงใช้งานได้ดีเว้นแต่เขาจะคาดหวังค่าจุดลอยตัว

— Zorayr

1

นี่ไม่ใช่ปัญหาใน ES6 อีกต่อไป Radix อาจถูกมองข้ามอย่างปลอดภัย 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;

— Vibhav Shreshth
แหล่งที่มา

6

ต่อไปนี้อาจเป็นประโยชน์ในแง่ทั่วไป

ครั้งแรก, HTML เขตข้อมูลฟอร์มจะถูก จำกัด ให้ข้อความ สิ่งนี้ใช้ได้กับกล่องข้อความโดยเฉพาะแม้ว่าคุณจะได้รับความเจ็บปวดเพื่อให้แน่ใจว่าค่าดูเหมือนเป็นตัวเลข
ข้อที่สองจาวาสคริปต์ดีกว่าหรือแย่กว่าทำให้โอเวอร์โหลด+มีความหมายสองตัว: เพิ่มตัวเลขและเชื่อมสตริงเข้าด้วยกัน มันมีการตั้งค่าสำหรับการเรียงต่อกันดังนั้นแม้การแสดงออกเช่น3+'4'จะได้รับการปฏิบัติต่อกัน
ประการที่สามจาวาสคริปต์จะพยายามเปลี่ยนประเภทแบบไดนามิกหากทำได้และหากจำเป็น ตัวอย่างเช่น'2'*'3'จะเปลี่ยนทั้งสองประเภทเป็นตัวเลขเนื่องจากคุณไม่สามารถคูณสตริงได้ หากหนึ่งในนั้นไม่เข้ากันคุณจะได้รับNaNไม่ใช่ตัวเลข

ปัญหาของคุณเกิดขึ้นเนื่องจากข้อมูลที่มาจากแบบฟอร์มนั้นถือเป็นสตริงและ+จะเชื่อมโยงกันแทนที่จะเพิ่ม

เมื่ออ่านข้อมูลที่เป็นตัวเลขที่คาดคะเนจากแบบฟอร์มคุณควรส่งผ่านparseInt()หรือparseFloat()ขึ้นอยู่กับว่าคุณต้องการจำนวนเต็มหรือทศนิยม

โปรดทราบว่าฟังก์ชั่นไม่แปลงสตริงเป็นตัวเลขอย่างแท้จริง แต่จะแยกสตริงจากซ้ายไปขวาจนกว่าจะเป็นอักขระตัวเลขที่ไม่ถูกต้องหรือไปยังจุดสิ้นสุดและแปลงสิ่งที่ได้รับการยอมรับ ในกรณีของparseFloatที่มีหนึ่งจุดทศนิยม แต่ไม่สอง

สิ่งใดหลังจากหมายเลขที่ถูกต้องจะถูกละเว้นเพียงแค่ พวกเขาล้มเหลวหากสตริงไม่ได้เริ่มเป็นตัวเลข NaNจากนั้นคุณจะได้รับ

เทคนิควัตถุประสงค์ทั่วไปที่ดีสำหรับตัวเลขจากแบบฟอร์มเป็นดังนี้:

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

หากคุณพร้อมที่จะรวมสตริงที่ไม่ถูกต้องเป็น 0 คุณสามารถใช้:

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

— Manngo
แหล่งที่มา

5

ง่าย

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

— Murtaza Khursheed Hussain
แหล่งที่มา

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

— taha
แหล่งที่มา

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>

— sharjeel
แหล่งที่มา

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
แหล่งที่มา

3

เพิ่มคำอธิบายพร้อมคำตอบสำหรับวิธีที่คำตอบนี้ช่วย OP ในการแก้ไขปัญหาปัจจุบัน

— Kяσѕρєя 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>

— Mohammed Ebrahim
แหล่งที่มา

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

หากเรามีสองช่องป้อนข้อมูลจากนั้นรับค่าจากช่องป้อนข้อมูลแล้วเพิ่มเข้าไปโดยใช้ 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

คุณสามารถทำการ precheck โดยใช้นิพจน์ทั่วไปที่มีตัวเลขเหมือนกัน

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

— แฮงค์

การตรวจสอบความถูกต้องของข้อมูลที่ป้อนโดยผู้ใช้นั้นเป็นแผนที่ดีอยู่เสมอ แต่คุณยังจำเป็นต้องแปลงสตริงอินพุตให้เป็นรูปแบบตัวเลขก่อนจึงจะสามารถเพิ่มตัวเลขได้

— nnnnnn

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>

ตอบ

— Manoj Krishna
แหล่งที่มา

-2

ทางเลือกอื่นเพียงแชร์ :):

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

— user3201772
แหล่งที่มา

ไม่ค่อยดีเท่าการใช้jQuery arithmetic pluginแต่ฉันชอบมัน

— Paul Draper