HTML 입력 필드에서 가져온 값은 기본적으로 문자열(string)입니다. 따라서 이 값을 숫자로 활용하려면 반드시 형 변환이 필요합니다. 문자열을 정수로 변환할 때는 JavaScript의 parseInt() 함수를 사용하는 것이 가장 일반적이고 간단한 방법입니다.
구현 예제
다음은 사용자가 입력한 값을 받아 정수인지 검사한 후, 콘솔에 결과를 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
<body>
<input type="text" id="txtInput" placeholder="숫자를 입력하세요">
<button type="button" onclick="result();">번호 가져오기</button>
</body>
<script>
function result() {
var numberValue = document.getElementById("txtInput").value;
if (!isNaN(numberValue))
console.log("입력한 값 = " + parseInt(numberValue));
else
console.log("정수를 입력해 주세요..");
}
</script>
</html>코드 설명
- document.getElementById("txtInput").value : id가
txtInput인 입력 필드에서 사용자가 입력한 값을 문자열 형태로 가져옵니다. - isNaN(numberValue) : 입력값이 숫자가 아닌지(Not-a-Number) 검사합니다.
isNaN()의 결과를!로 반전시켜, 숫자일 경우에만 변환 로직을 실행합니다. - parseInt(numberValue) : 문자열을 정수로 변환하여 반환합니다. 예를 들어 "123"이라는 문자열은 숫자 123으로 바뀝니다.
실행 방법
위 코드를 작성한 후 파일 이름을 index.html 등으로 저장합니다. VS Code 편집기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 브라우저에서 프로그램을 바로 실행할 수 있습니다.
실행 결과
프로그램을 실행하면 다음과 같이 텍스트 입력창과 버튼이 화면에 나타납니다.
텍스트 상자에 원하는 숫자 값을 입력해 보세요.
그다음 버튼을 누르면 아래와 같은 결과를 얻을 수 있습니다.
개발자 도구 콘솔(Console)을 열어 확인하면 다음과 같이 입력값이 정수로 변환되어 출력된 것을 볼 수 있습니다.
만약 숫자가 아닌 문자를 입력하고 버튼을 누르면, isNaN() 검사에 의해 "정수를 입력해 주세요.."라는 안내 메시지가 콘솔에 출력됩니다. 이처럼 parseInt()와 isNaN()을 함께 사용하면 잘못된 입력값을 안전하게 처리할 수 있습니다.