JavaScript에서 계산 결과나 처리한 값을 텍스트 상자(input)에 출력하려면 value 속성을 활용하면 됩니다. 사용자가 입력한 값을 가져올 때도, 결과를 화면에 표시할 때도 모두 value 속성을 통해 읽고 쓸 수 있습니다.
기본 원리
텍스트 상자의 값을 가져오거나 설정하는 기본 문법은 다음과 같습니다.
// 값 가져오기
var value = document.getElementsByName('요소명')[0].value;
// 값 설정하기
document.getElementsByName('요소명')[0].value = 출력할값;예제: 두 숫자를 더해 텍스트 상자에 출력하기
아래 예제는 두 개의 입력 상자에 숫자를 입력하고 버튼을 클릭하면, 두 수의 합계가 세 번째 텍스트 상자에 자동으로 출력되는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 텍스트 상자 출력 예제</title>
</head>
<body>
<label for="input1">첫 번째 숫자: </label><input type="text" name="input1"><br>
<label for="input2">두 번째 숫자: </label><input type="text" name="input2"><br>
<button onClick="add()">두 수 더하기</button><br>
<label for="display">합계: </label><input type="text" name="display">
<script>
function add() {
var f = parseInt(document.getElementsByName('input1')[0].value);
var s = parseInt(document.getElementsByName('input2')[0].value);
var result = f + s;
document.getElementsByName('display')[0].value = result;
}
</script>
</body>
</html>코드 설명
- parseInt(): 텍스트 상자에서 가져온 값은 문자열이므로, parseInt() 함수를 사용해 정수로 변환합니다. 변환하지 않으면 문자열 연결(예: "5" + "3" = "53")이 발생할 수 있습니다.
- getElementsByName(): name 속성으로 요소를 선택하며, 동일한 name을 가진 요소가 여러 개일 수 있으므로 배열 형태로 반환됩니다. 따라서 [0] 인덱스로 첫 번째 요소에 접근합니다.
- .value = result: 계산된 결과를 display 텍스트 상자의 value 속성에 대입하여 화면에 출력합니다.
실행 방법
위 코드를 index.html 등의 파일 이름으로 저장한 뒤, VS Code 편집기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하여 실행합니다. 물론 일반 브라우저에서 HTML 파일을 직접 열어도 동일하게 동작합니다.
실행 결과
페이지를 열면 첫 번째 숫자와 두 번째 숫자 입력 상자가 표시됩니다.
각각의 숫자를 입력한 후 '두 수 더하기' 버튼을 클릭하면, 합계가 아래 텍스트 상자에 즉시 출력됩니다.
추가 팁: 다른 방법들
value 속성 외에도 다양한 방식으로 텍스트 상자에 접근할 수 있습니다.
- document.getElementById('id'): id 속성으로 요소를 선택하는 방법으로, 가장 많이 사용되며 성능도 우수합니다.
- document.querySelector('#id 또는 .class'): CSS 선택자 문법을 사용해 유연하게 요소를 선택할 수 있습니다.
- jQuery: $('#display').val(result)처럼 간결한 문법으로 값을 읽고 쓸 수 있습니다.
이처럼 JavaScript의 value 속성만 활용하면 별도의 라이브러리 없이도 텍스트 상자에 원하는 값을 쉽게 출력할 수 있습니다.