버튼 클릭에 반응해 입력값 읽기

지난 강의에서는 할 일 화면의 요소를 JavaScript로 선택했습니다. 이번에는 추가 버튼을 누를 때 입력창의 글자를 읽어 콘솔에 표시합니다. 아직 목록에 항목을 추가하지는 않습니다.

시작 파일 준비하기

이전 강의의 파일이 없어도 실습할 수 있도록 필요한 HTML을 모두 준비했습니다. 같은 폴더에 index.html과 빈 script.js를 만들고, 다음 내용을 index.html에 저장하세요.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>나의 할 일 목록</title>
</head>
<body>
  <main>
    <h1>나의 할 일 목록</h1>
    <label for="todo-input">할 일</label>
    <input id="todo-input" type="text" placeholder="할 일을 입력하세요">
    <button id="add-button" type="button">추가</button>
    <ul id="todo-list"></ul>
  </main>
  <script src="script.js"></script>
</body>
</html>

script 요소를 화면 요소 뒤에 두었으므로 JavaScript가 실행될 때 입력창과 버튼을 선택할 수 있습니다. type="button"은 버튼의 기본 제출 동작을 사용하지 않도록 지정합니다.

클릭할 때 입력값 읽기

다음은 이번 단계의 완성된 script.js입니다. 파일에 저장한 뒤 index.html을 브라우저에서 열어 보세요.

const todoInput = document.querySelector('#todo-input');
const addButton = document.querySelector('#add-button');
addButton.addEventListener(‘click’, function () {
const text = todoInput.value;
console.log(‘입력한 할 일:’, text);
});

document.querySelector()는 선택자에 맞는 요소를 찾습니다. addEventListener('click', ...)는 버튼에서 클릭이 일어났을 때 실행할 함수를 연결합니다. 함수 안의 코드는 연결할 때 바로 실행되지 않고, 버튼을 클릭할 때마다 실행됩니다.

todoInput.value는 입력창의 현재 문자열 값입니다. 값을 함수 안에서 읽기 때문에 버튼을 누를 때마다 그 시점의 입력 내용을 가져옵니다. 반대로 value를 함수 밖에서 한 번만 읽어 변수에 저장하면 이후 입력창을 수정해도 그 변수는 자동으로 바뀌지 않습니다.

아래 실행 예제는 HTML과 JavaScript를 한 파일로 결합한 것입니다. 캡처에는 입력하기 전의 초기 화면이 표시되며, 버튼을 눌렀을 때의 입력 결과는 브라우저 개발자 도구의 콘솔에서 확인합니다.

콘솔에서 확인하기

1. 브라우저 개발자 도구를 열고 Console 탭을 선택합니다.
2. 입력창에 책 읽기를 입력하고 추가 버튼을 누릅니다. 콘솔에 입력한 할 일: 책 읽기가 표시될 것으로 예상합니다.
3. 입력 내용을 산책하기로 바꾸고 다시 누릅니다. 새 콘솔 출력에 바뀐 내용이 표시되는지 확인합니다.

버튼을 눌러도 화면의 목록은 그대로입니다. 이번 단계에서는 읽은 값을 콘솔에만 출력하기 때문입니다. 입력창이 비어 있어도 클릭은 처리되며, 빈 입력을 구분하는 방법은 다음 강의에서 다룹니다.

직접 연습하기

입력창의 글자를 바꾸면서 버튼을 여러 번 누르고, 클릭할 때마다 콘솔에 어떤 값이 추가되는지 확인해 보세요. 그다음 console.log의 첫 번째 문자열을 '오늘의 할 일:'로 바꾸어 출력 문구도 수정해 보세요.

출력이 보이지 않으면 파일을 저장하고 페이지를 새로고침한 뒤, 콘솔 오류를 확인하세요. 특히 script.js가 HTML 파일과 같은 폴더에 있는지, HTML의 id와 JavaScript의 선택자가 정확히 일치하는지 살펴보세요.