JavaScript에서 함수의 실행 결과를 HTML 페이지에 표시하려면 document.getElementById().innerHTML 속성을 활용할 수 있습니다. 이 방법은 특정 ID를 가진 HTML 요소를 찾아 그 내부에 원하는 텍스트나 결과값을 동적으로 삽입하는 가장 기본적이고 널리 사용되는 방식입니다.
기본 문법
document.getElementById().innerHTML
예제 코드
다음은 페이지 내의 텍스트 입력 상자(input type="text") 개수를 세어 그 결과를 화면에 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<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>
<div>
<input type="text">
<br>
<input type="text">
<br>
<input type="radio">
<br>
<input type="text">
<br>
<input type="radio">
<br>
</div>
<br>
<span id='totalNumberOfTextBox'></span>
</body>
<script>
total_number_of_check_box();
function total_number_of_check_box() {
var inputObj = document.getElementsByTagName("input"),
counter = 0;
for (var i = 0; i < inputObj.length; i++) {
if (inputObj[i].type == "text") {
counter++;
}
}
document.getElementById('totalNumberOfTextBox').innerHTML = "Total
Number of text box is=" + counter;
}
</script>
</html>코드 설명
위 코드의 핵심 로직을 살펴보면 다음과 같습니다.
- document.getElementsByTagName("input") — 문서 내 모든 input 요소를 가져옵니다.
- for 반복문 — 각 input 요소의 type 속성이 "text"인지 확인하고, 해당하는 경우 카운터(counter) 값을 1씩 증가시킵니다.
- innerHTML — 최종 계산된 카운터 값을 id가 'totalNumberOfTextBox'인 span 요소에 삽입하여 화면에 표시합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 뒤, VS Code 편집기에서 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면, 저장된 HTML 파일을 브라우저에서 직접 열어도 동일하게 실행할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같은 결과가 화면에 나타납니다.
페이지에는 총 5개의 input 요소 중 텍스트 타입이 3개이므로, "Total Number of text box is=3"이라는 메시지가 span 영역에 표시됩니다. 이처럼 innerHTML 속성을 사용하면 JavaScript 함수의 계산 결과나 처리 결과를 별도의 새로고침 없이 HTML 화면에 바로 반영할 수 있습니다.