JavaScript에서 + 기호가 두 숫자를 더하는 대신 문자열처럼 이어 붙이는(연결하는) 현상이 나타나는 이유는 parseInt()를 사용하지 않았기 때문입니다.
텍스트 상자(input box)에서 가져온 값은 기본적으로 문자열(string) 타입입니다. 따라서 산술 연산을 수행하기 전에 반드시 parseInt()를 사용해 값을 정수로 변환(파싱)해야 합니다.
parseInt()를 사용한 해결 방법
텍스트 상자에서 값을 읽어 온 후 해당 값을 파싱하면 문제가 해결됩니다. 다음은 완성된 예제 코드입니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
FirstNumber:
<input type="num" class="num1" placeholder=""><br>
SecondNumber:<input type="num" class="num2" placeholder=""><br><br>
<input type="button" onclick="sumOfTwoNumbers()" value="Addition">
<p class="output"></p>
<script>
function sumOfTwoNumbers(){
var num1 = document.querySelector(".num1").value;
var num2 = document.querySelector(".num2").value;
var addition = parseInt(num1)+parseInt(num2);
document.querySelector(".output").innerHTML = "The addition of two
numbers= " + addition;
}
</script>
</body>
</html>프로그램 실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(index.html)로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 'Open with Live Server' 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
이제 두 개의 텍스트 상자에 각각 숫자를 입력하고 'Addition' 버튼을 클릭하면, 문자열이 연결되지 않고 올바른 합계가 출력되는 것을 확인할 수 있습니다.
