두 숫자를 더하면 합을 계산하는 대신 연결합니다

184

두 개의 숫자를 추가하고 있지만 올바른 값을 얻지 못했습니다.

예를 들어 1 + 23이 아닌 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
1
텍스트 입력 값은 문자열이고 문자열은 항상 추가 대신 연결됩니다
— hank
1
변환에 대한 좋은 글은 이 Answer에 있습니다.
— akTed
1
— 유기농 지지자
가있는 경우 속성을 직접 <input type="number">가져올 수 .valueAsNumber있습니다.
— user4642212

답변:

343

실제로는 숫자가 아니라 문자열입니다. 문자열에서 숫자를 생성하는 가장 쉬운 방법은 앞에 붙는 것입니다 +.

var x = +y + +z;
— 엘크 란
소스
4
호기심에서 (자신은 JavaScript 프로그래머가 아닙니다) (그리고 이것이 대답을 향상시킬 것이라고 생각합니다)- +접두사는 문자열과 무엇을합니까?
— Sebastian Mach
30
위의 코드는 약간 기괴하며 덜 노련한 개발자를 혼란스럽게 할 것입니다. 이 코드는 또한 '+'를 혼동하여 JSLint에 실패합니다.
— Zorayr
2
@phresnel : 단항 + 연산자
— akTed
10
@ AKTed : 사실 나는 그의 대답 내에서 그것을 설명하기 위해 elclanrs를 자극하고 싶었습니다 . 물론 Google 검색을 직접 수행 할 수는 없습니다. 그러나 문자열 변환에 접두사 +를 사용하는 것이 다른 프로그래밍 언어에서는 흔하지 않으며 초보자를 혼동시킬 수 있기 때문에 응답의 품질을 향상시킬 수 있습니다. (그러나 링크를 공유해 주셔서 감사합니다)
— Sebastian Mach
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()문자열을 다시 숫자로 바꾸려면 javaScript의 메소드 를 사용해야 합니다. 지금은 문자열이므로 두 개의 문자열을 추가하면 문자열이 연결되므로 "12"가 표시됩니다.

— 흉내 내기
소스
1
parseInt()OP의 기능이 두 개의 "정수"가 아닌 두 개의 사용자 입력 "숫자"를 추가한다는 점을 감안할 때 최선의 선택은 확실 하지 않습니다.
— nnnnnn
2
@nnnnnn 나는 parseFloatOP가 더 많은 입력을 제공한다면 쉽게 수정할 수 있다고 생각 합니다.
— Yoshi
1
@Yoshi-그렇습니다. 그렇지만 대답은 실제로 parseInt()정수 만 반환 하는 곳을 말하지 않으며 parseInt()사용자가 입력 한 데이터에 문제가 될 수있는 '질문'을 설명하지 않습니다. 언급 할 가치가 있다고 생각했습니다. (실제로 downvote 또는 아무것도하지 않았다.)
— 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의 기능이 두 개의 "정수"가 아닌 두 개의 사용자 입력 "숫자"를 추가한다는 점을 감안할 때 최선의 선택은 확실 하지 않습니다.
— nnnnnn
1
그가 부동 소수점 값을 기대하지 않는 한이 접근법을 사용하면 여전히 효과적이라고 생각합니다.
— Zorayr
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 양식 필드는 text 로 제한됩니다 . 값 이 숫자처럼 보이 도록 고통을 겪었더라도 텍스트 상자에 특히 적용됩니다 .

  • 둘째, JavaScript는 더 좋든 나쁘 든 +연산자에 두 가지 의미로 오버로드되었습니다. 숫자를 추가하고 문자열을 연결합니다. 연결을 선호하므로 같은 표현조차 3+'4'연결로 취급됩니다.

  • 셋째, JavaScript는 가능한 경우 유형을 동적으로 변경하려고 시도합니다. 예를 들어 '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;
— 망고
소스
4

이것은 숫자를 요약하지 않습니다. 대신 그것을 연결합니다 :

var x = y + z;

해야 할 일 :

var x = (y)+(z);

숫자에 대한 작업을 지정하려면 parseInt를 사용해야합니다. 예:

var x = parseInt(y) + parseInt(z); [final soulution, as everything us]
— 푸쉬 싱
소스
이것은 올바른에 대한 해답이 될 수 있어야 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

입력 필드가 두 개인 경우 입력 필드에서 값을 가져온 다음 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 반환을 확인할 수 있습니다.
— hank
사용자가 입력 한 데이터의 유효성을 검사하는 것은 항상 좋은 계획이지만 숫자를 추가하기 전에 입력 문자열을 숫자 형식으로 변환해야합니다.
— 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>

대답

여기에 이미지 설명을 입력하십시오

— 마노이 크리슈나
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.