source

두 숫자를 더하면 합계가 계산되지 않고 두 숫자를 연결할 수 있습니다.

lovecheck 2022. 12. 8. 21:24
반응형

두 숫자를 더하면 합계가 계산되지 않고 두 숫자를 연결할 수 있습니다.

두 숫자를 더하고 있는데 정확한 값이 나오지 않습니다.

예를 들어, 하는 것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>

그것들은 실제로 숫자가 아니라 문자열이다.문자열에서 숫자를 생성하는 가장 쉬운 방법은 문자열의 선두에+:

var x = +y + +z;

그냥 쓰는 거예요.Number():

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

JavaScript를 사용해야 합니다.parseInt()스트링을 수치로 되돌리는 방법.지금은 문자열이기 때문에 두 개의 문자열을 추가하면 "12"가 됩니다.

parseInt(...)를 사용하되 기수 값을 지정해야 합니다.그렇지 않으면 여러 버그가 발생합니다(문자열이 "0"으로 시작하는 경우 기수는 8진수/8 등).

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

alert(x + y);

이게 도움이 됐으면 좋겠네요!

다음은 일반적인 용어로 유용할 수 있습니다.

  • 첫째, HTML 양식 필드는 텍스트로 제한됩니다.이는 특히 텍스트박스에 적용됩니다.값이 숫자처럼 보이도록 하기 위해 애쓴 경우에도 마찬가지입니다.

  • 둘째로, JavaScript는 좋든 나쁘든 간에+두 가지 의미를 가진 연산자: 숫자를 추가하고 문자열을 연결합니다.연동을 선호하기 때문에 이런 표현도 있습니다.3+'4'는 연결로 처리됩니다.

  • 셋째, JavaScript는 가능한 경우나 필요한 경우 동적으로 유형을 변경하려고 합니다.예를들면'2'*'3'문자열을 곱할 수 없기 때문에 두 유형 모두 숫자로 변경됩니다.둘 중 하나가 호환되지 않으면NaN, 번호가 아닙니다.

이 문제는 폼에서 전송된 데이터가 문자열로 간주되기 때문에 발생합니다.+따라서 추가가 아니라 연결됩니다.

폼에서 숫자 데이터를 읽을 때는 항상 끝까지 밀어 넣어야 합니다.parseInt()또는parseFloat()(정수 또는 소수 중 어느 쪽을 사용할지에 따라 다릅니다.

어느 함수도 문자열을 숫자로 변환하지 않습니다.대신 비활성 숫자 또는 마지막에 도달할 때까지 문자열을 왼쪽에서 오른쪽으로 해석하고 수락된 문자열을 변환합니다.의 경우parseFloat소수점은 1개 포함하지만 2개는 포함하지 않습니다.

유효한 숫자 이후의 모든 것은 무시됩니다.문자열이 숫자로 시작되지 않으면 둘 다 실패합니다.그러면 너는 얻을 수 있을 것이다.NaN.

형태에서 숫자를 추출하는 좋은 범용 기술은 다음과 같습니다.

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

잘못된 문자열을 0으로 병합할 준비가 되어 있는 경우 다음을 사용할 수 있습니다.

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

입력이 텍스트로 이루어지므로 간단한 타입의 캐스팅 방법을 추가하기만 하면 됩니다.다음을 사용합니다.

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

이것은 숫자를 합산하지 않고 대신 연결합니다.

var x = y + z;

다음 작업을 수행해야 합니다.

var x = (y)+(z);

구문 분석을 사용해야 합니다.int: 번호에 대한 동작을 지정합니다.예를 들어:

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

간단하죠.

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

이 코드는 두 변수를 모두 합산합니다!기능을 이용하다

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

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

또는 단순히 초기화할 수도 있습니다.

var x = 0; (let x = 0;을 사용해야 합니다.)

이렇게 하면 추가되지 않습니다.

추가 단계 중에 형식 변환이 누락되었습니다...
var x = y + z;should be 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>

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

매우 간단합니다.

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

이것을 시험해 보세요.

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

입력 필드가 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);
});

아무것도 동작하지 않는 경우는, 이것만 시험해 주세요.이것은 올바른 방법이 아닐 수도 있지만 위의 모든 것이 실패했을 때 나에게 효과가 있었다.

 var1 - (- var2)

또한 요소를 사용하여 보다 네이티브한 HTML 솔루션을 사용할 수도 있습니다.

<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
  <input type="number" id="a" name="a" value="10" /> +
  <input type="number" id="b" name="b" value="50" /> =
  <output name="result" for="a b">60</output>
</form>

https://jsfiddle.net/gxu1rtqL/

output요소는 사용자 작업의 계산 또는 출력을 위한 컨테이너 요소 역할을 할 수 있습니다.은 HTML 에서 .number로로 합니다.range아래 그림과 같이 다른 UI 요소로 동일한 코드와 기능을 유지합니다.

<form oninput="result.value=parseInt(a.valueAsNumber)+parseInt(b.valueAsNumber)">
  <input type="range" id="a" name="a" value="10" /> +
  <input type="number" id="b" name="b" value="50" /> =
  <output name="result" for="a b">60</output>
</form>

https://jsfiddle.net/gxu1rtqL/2/

숫자인 경우처럼 정규 표현으로 사전 확인을 할 수 있습니다.

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

parseFloat문자열을 10진수 값을 포함한 숫자로 변환합니다.

 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>

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>

함수의 변수를 구문 분석하여 코드를 표시합니다.

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

정답.

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

이 함수를 사용하여 숫자를 추가할 수 있습니다.

function calculate(a, b) {
  return a + b
}
console.log(calculate(5, 6))

대체 솔루션, 공유:):

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

언급URL : https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum

반응형

'source' 카테고리의 다른 글

하나의 명령을 사용하여 여러 DB에 부여  (0) 2022.12.08
pip freeze 명령어 출력의 "pkg-param==0.0.0"은 무엇입니까?  (0) 2022.12.08
SQL Select 문의 동적 열, "정의되지 않은" 값 유지  (0) 2022.12.08
REST 웹 서비스에서 클라이언트로 파일을 보내는 올바른 방법은 무엇입니까?  (0) 2022.12.08
다운로드 RDS 스냅샷  (0) 2022.11.28

'source'의 다른글

  • 현재글두 숫자를 더하면 합계가 계산되지 않고 두 숫자를 연결할 수 있습니다.

관련글

댓글

티스토리툴바