버튼 클릭으로 HTML input 필드에 텍스트 추가하는 방법

개요

웹 개발을 하다 보면 버튼을 클릭했을 때 입력 필드(input)에 특정 텍스트를 자동으로 추가해야 하는 경우가 종종 있습니다. 이 글에서는 JavaScript의 document.getElementById() 메서드와 클릭 이벤트 리스너를 활용하여, 버튼 클릭 시 HTML <input> 요소에 텍스트를 추가하는 방법을 단계별로 알아보겠습니다.

HTML 버튼 예시

먼저 아래와 같은 HTML 버튼이 있다고 가정해 보겠습니다.

<button id="clickButton">아래 텍스트 상자에 값을 추가하려면 버튼을 클릭하세요</button>

구현 원리

버튼 클릭 시 <input>에 텍스트를 추가하려면 document.getElementById() 메서드를 사용합니다. 이 메서드는 지정한 ID를 가진 요소를 찾아주며, 찾은 요소의 value 속성에 접근할 수 있게 해줍니다. 여기에 addEventListener("click", ...)으로 클릭 이벤트를 등록하고, 기존 값 뒤에 새 텍스트를 덧붙이는(+=) 방식을 사용하면 버튼을 누를 때마다 입력 필드에 텍스트가 계속 추가됩니다.

전체 코드 예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=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>
<button id="clickButton">아래 텍스트 상자에 값을 추가하려면 버튼을 클릭하세요</button>
<br/><br />
<input id="readTheInput" />
<script>
    document.getElementById("clickButton").addEventListener("click", () =>{
       document.getElementById("readTheInput").value += "JavaScript";
    });
</script>
</body>
</html>

프로그램 실행 방법

위 프로그램을 실행하려면 파일 이름을 “anyName.html(예: index.html)”로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. 그다음 VS Code 편집기에서 “Open with Live Server” 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

버튼 클릭으로 HTML input 필드에 텍스트 추가하는 방법

여기서 버튼을 두 번 클릭하면, 클릭할 때마다 “JavaScript”라는 텍스트가 입력 필드에 계속 덧붙여져 아래와 같은 결과가 나타납니다.

버튼 클릭으로 HTML input 필드에 텍스트 추가하는 방법

마무리

이처럼 getElementById()와 이벤트 리스너만 활용해도 별도의 라이브러리 없이 간단하게 버튼과 입력 필드를 연동할 수 있습니다. 응용하면 고정된 문자열 대신 사용자가 원하는 값을 동적으로 추가하는 기능도 손쉽게 구현할 수 있습니다.