함수와 이벤트

1. 학습 목표

이 장을 학습하면 다음 내용을 이해할 수 있다.

1. 함수가 필요한 이유를 설명할 수 있다.
2. 함수를 선언하고 호출할 수 있다.
3. 매개변수와 반환값을 사용할 수 있다.
4. 이벤트의 의미를 설명할 수 있다.
5. 버튼 클릭과 같은 이벤트가 발생하였을 때 함수를 실행할 수 있다.
6. HTML 요소와 JavaScript 함수를 연결할 수 있다.

---

2. 함수란 무엇인가

2.1 함수의 기본 개념

함수는 특정 작업을 수행하도록 여러 명령문을 하나로 묶은 코드 블록이다.

예를 들어 자판기의 버튼을 누르면 다음 과정이 실행된다.

1. 사용자가 음료 버튼을 누른다.
2. 자판기가 돈이 충분한지 확인한다.
3. 선택한 음료를 내보낸다.
4. 필요한 경우 거스름돈을 반환한다.

이러한 일련의 작업을 하나로 묶어 놓은 것이 함수와 비슷하다.

function 음료꺼내기() {
    console.log("음료를 내보냅니다.");
}

 

함수는 정의만 하여서는 실행되지 않는다. 함수를 실행하려면 함수의 이름을 사용하여 호출하여야 한다.

음료꺼내기();

 

---

2.2 함수가 필요한 이유

다음 코드는 같은 문장을 세 번 출력한다.

console.log("안녕하세요.");
console.log("안녕하세요.");
console.log("안녕하세요.");

 

같은 작업을 반복하여 작성하면 코드가 길어지고 수정하기도 어렵다. 함수를 사용하면 다음과 같이 정리할 수 있다.

function 인사하기() {
    console.log("안녕하세요.");
}

인사하기();
인사하기();
인사하기();

 

실행 결과는 다음과 같다.

안녕하세요.
안녕하세요.
안녕하세요.

함수를 사용하는 주요 이유는 다음과 같다

요소	설명
반복 사용	같은 코드를 여러 번 사용할 수 있다.
코드 정리	관련된 작업을 하나로 묶을 수 있다.
수정 편리	함수 내부만 수정하면 모든 호출에 반영된다.
오류 감소	같은 코드를 반복 작성하면서 발생하는 실수를 줄일 수 있다.
가독성 향상	함수 이름을 통하여 코드의 목적을 쉽게 알 수 있다.

---

3. 함수 선언과 호출

3.1 함수 선언

함수를 만드는 것을 함수 선언이라고 한다.

function 함수이름() {
    실행할 코드;
}

 

각 부분의 의미는 다음과 같다.

구성	의미
function	함수를 선언하는 키워드이다.
함수이름	함수를 구분하기 위한 이름이다.
()	함수에 필요한 값을 전달받는 부분이다.
{}	함수가 수행할 코드를 작성하는 영역이다.

예제를 살펴보자.

function sayHello() {
    console.log("안녕하세요.");
}

 

이 코드는 sayHello라는 함수를 만든 것이다. 아직 함수가 실행된 것은 아니다.

---

3.2 함수 호출

만들어 놓은 함수를 실행하는 것을 함수 호출이라고 한다.

sayHello();

 

전체 코드는 다음과 같다.

function sayHello() {
    console.log("안녕하세요.");
}

sayHello();

 

실행 순서는 다음과 같다.

1. JavaScript가 sayHello 함수를 확인한다.
2. sayHello()를 만나면 함수 내부로 이동한다.
3. console.log("안녕하세요.")를 실행한다.
4. 함수 실행이 끝나면 호출한 위치로 돌아온다.

실행 결과는 다음과 같다.

안녕하세요.

 

 

---

4. 함수 이름 작성 방법

함수 이름은 함수가 하는 일을 알 수 있도록 작성하는 것이 좋다.

function showMessage() {
    console.log("메시지를 출력합니다.");
}

 

다음과 같은 이름은 함수의 목적을 이해하기 어렵다.

function a() {
    console.log("메시지를 출력합니다.");
}

 

JavaScript에서는 함수 이름에 주로 동사를 사용한다.

function showMessage() {}
function calculateTotal() {}
function changeColor() {}
function printResult() {}
function checkPassword() {}

 

여러 단어를 연결할 때는 두 번째 단어부터 첫 글자를 대문자로 작성하는 카멜 표기법을 주로 사용한다.

showMessage
changeBackgroundColor
calculateTotalPrice

 

 

---

5. 매개변수가 있는 함수

5.1 매개변수의 개념

함수를 실행할 때마다 다른 값을 사용하고 싶다면 매개변수를 사용한다.

다음 함수는 항상 같은 이름만 출력한다.

function greet() {
    console.log("민수님, 안녕하세요.");
}

 

여러 사람의 이름을 출력하려면 매개변수를 사용한다.

function greet(name) {
    console.log(name + "님, 안녕하세요.");
}

 

함수를 호출할 때 이름을 전달한다.

greet("민수");
greet("영희");
greet("지수");

 

실행 결과는 다음과 같다.

민수님, 안녕하세요.
영희님, 안녕하세요.
지수님, 안녕하세요.

 

여기에서 name은 매개변수이고 "민수"는 인수이다.

용어	설명
매개변수	함수가 값을 전달받기 위하여 선언한 변수이다.
인수	함수를 호출할 때 실제로 전달하는 값이다.

function greet(name) {
    //             ↑ 매개변수
    console.log(name + "님, 안녕하세요.");
}

greet("민수");
//    ↑ 인수

 

---

 

5.2 두 개의 매개변수 사용하기

함수는 여러 개의 값을 전달받을 수 있다.

function addNumber(a, b) {
    console.log(a + b);
}

addNumber(10, 20);

 

실행 결과는 다음과 같다.

30

 

실행 과정은 다음과 같다.

1. addNumber(10, 20)을 호출한다.
2. 첫 번째 값 10이 매개변수 a에 저장된다.
3. 두 번째 값 20이 매개변수 b에 저장된다.
4. a + b를 계산한다.
5. 계산 결과 30을 출력한다.

다른 값을 전달하면 결과도 달라진다.

addNumber(3, 5);
addNumber(100, 200);

 

실행 결과는 다음과 같다.

8
300

 

---

 

6. 반환값이 있는 함수

6.1 반환값의 개념

함수에서 계산한 결과를 함수 밖으로 전달하려면 return을 사용한다.

function addNumber(a, b) {
    return a + b;
}

 

함수가 반환한 값은 변수에 저장할 수 있다.

let result = addNumber(10, 20);

console.log(result);

 

실행 결과는 다음과 같다.

30

 

 

---

6.2 출력과 반환의 차이

다음 함수는 결과를 화면에 출력한다.

function addNumber(a, b) {
    console.log(a + b);
}

 

이 함수는 결과를 출력할 뿐, 계산 결과를 다른 코드에서 사용하기 어렵다.

반면 return을 사용하면 결과를 변수에 저장하거나 다른 계산에 사용할 수 있다.

function addNumber(a, b) {
    return a + b;
}

let result = addNumber(10, 20);

console.log(result);
console.log(result * 2);

 

실행 결과는 다음과 같다.

30
60

 

return을 만나면 함수의 실행은 즉시 종료된다.

function test() {
    console.log("첫 번째 문장");
    return;
    console.log("두 번째 문장");
}

test();

 

실행 결과는 다음과 같다.

첫 번째 문장

 

return 다음에 작성된 코드는 실행되지 않는다.

---

7. 이벤트란 무엇인가

7.1 이벤트의 기본 개념

이벤트는 웹페이지에서 사용자의 행동이나 브라우저의 상태 변화로 발생하는 사건이다.

대표적인 이벤트는 다음과 같다.

이벤트	상황
click	요소를 클릭하였을 때
dblclick	요소를 두 번 클릭하였을 때
mouseover	마우스 포인터를 요소 위에 올렸을 때
mouseout	마우스 포인터가 요소 밖으로 나갔을 때
keydown	키보드의 키를 눌렀을 때
keyup	눌렀던 키에서 손을 뗐을 때
input	입력 내용이 변경되었을 때
change	선택값이나 입력값이 변경되었을 때
submit	폼을 제출하였을 때
load	웹페이지나 이미지의 로딩이 끝났을 때

예를 들어 사용자가 버튼을 클릭하면 click 이벤트가 발생한다.

사용자 버튼 클릭
        ↓
click 이벤트 발생
        ↓
연결된 함수 실행
        ↓
화면 내용 변경

 

---

 

8. 함수와 이벤트의 관계

함수와 이벤트는 서로 다른 개념이다.

• 함수는 실행할 작업을 정의한 코드이다.
• 이벤트는 특정 행동이나 변화가 발생한 상황이다.

그러나 웹페이지에서는 이벤트가 발생하였을 때 함수를 실행하도록 연결하는 경우가 많다.

이벤트 발생 → 함수 호출 → 코드 실행

 

예를 들어 다음과 같이 구성할 수 있다.

1. 사용자가 버튼을 클릭한다.
2. click 이벤트가 발생한다.
3. showMessage 함수가 실행된다.
4. 화면에 메시지가 표시된다.

---

9. 첫 번째 이벤트 예제: 버튼 클릭하기

9.1 HTML 작성

먼저 버튼과 문장을 작성한다.

<button id="messageButton">클릭하세요</button>
<p id="message">여기에 메시지가 표시됩니다.</p>

 

전체 HTML 문서는 다음과 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>함수와 이벤트</title>
</head>
<body>
    <button id="messageButton">클릭하세요</button>
    <p id="message">여기에 메시지가 표시됩니다.</p>

    <script src="script.js"></script>
</body>
</html>

 

---

 

9.2 HTML 요소 가져오기

JavaScript에서 HTML 요소를 사용하려면 document.getElementById()를 사용한다.

const button = document.getElementById("messageButton");
const message = document.getElementById("message");

 

이 코드는 HTML에서 다음 요소를 가져온다.

<button id="messageButton">클릭하세요</button>
<p id="message">여기에 메시지가 표시됩니다.</p>

 

id 값은 HTML 문서에서 요소를 구분하는 이름이다.

9.3 실행할 함수 만들기

 

function showMessage() {
    message.textContent = "버튼을 클릭하였습니다.";
}

 

textContent는 HTML 요소의 글자를 변경하는 속성이다.

9.4 이벤트와 함수 연결하기

addEventListener()를 사용하여 이벤트와 함수를 연결한다.

button.addEventListener("click", showMessage);

 

각 부분의 의미는 다음과 같다.

button.addEventListener("click", showMessage);

부분	의미
button	이벤트를 적용할 HTML 요소이다.
addEventListener	이벤트를 등록하는 메서드이다.
"click"	감지할 이벤트 종류이다.
showMessage	이벤트 발생 시 실행할 함수이다.

---

9.5 전체 JavaScript 코드

const button = document.getElementById("messageButton");
const message = document.getElementById("message");

function showMessage() {
    message.textContent = "버튼을 클릭하였습니다.";
}

button.addEventListener("click", showMessage);

 

전체 실행 순서는 다음과 같다.

1. JavaScript가 버튼 요소를 가져온다.
2. 문장을 표시할 <p> 요소를 가져온다.
3. showMessage 함수를 선언한다.
4. 버튼에 click 이벤트를 등록한다.
5. 사용자가 버튼을 클릭한다.
6. showMessage 함수가 실행된다.
7. 문장의 내용이 변경된다.

---

10. 함수 호출 시 주의점

이벤트에 함수를 연결할 때는 함수 이름 뒤에 괄호를 붙이지 않는다.

올바른 코드이다.

button.addEventListener("click", showMessage);

 

잘못 작성하기 쉬운 코드이다.

button.addEventListener("click", showMessage());

 

showMessage()라고 작성하면 버튼을 클릭하기 전부터 함수가 즉시 실행된다.

 

---

11. 두 번째 이벤트 예제: 배경색 변경하기

11.1 HTML 코드

<button id="colorButton">배경색 변경</button>

 

11.2 JavaScript 코드

const colorButton = document.getElementById("colorButton");

function changeBackgroundColor() {
    document.body.style.backgroundColor = "lightblue";
}

colorButton.addEventListener("click", changeBackgroundColor);

 

실행 과정은 다음과 같다.

1. 사용자가 배경색 변경 버튼을 클릭한다.
2. click 이벤트가 발생한다.
3. changeBackgroundColor 함수가 실행된다.
4. 웹페이지의 배경색이 하늘색으로 변경된다.

---

12. 세 번째 이벤트 예제: 숫자 증가시키기

12.1 HTML 코드

<h2 id="number">0</h2>
<button id="increaseButton">1 증가</button>

 

12.2 JavaScript 코드

const number = document.getElementById("number");
const increaseButton = document.getElementById("increaseButton");

let count = 0;

function increaseNumber() {
    count = count + 1;
    number.textContent = count;
}

increaseButton.addEventListener("click", increaseNumber);

 

실행 과정은 다음과 같다.

1. count 변수의 초기값은 0이다.
2. 사용자가 버튼을 클릭한다.
3. increaseNumber 함수가 실행된다.
4. count 값이 1 증가한다.
5. 증가한 값을 <h2> 요소에 표시한다.

버튼을 세 번 클릭하면 다음과 같이 값이 변경된다.

0 → 1 → 2 → 3

 

count = count + 1은 다음과 같이 줄여 쓸 수 있다.

count++;

 

따라서 함수는 다음과 같이 작성할 수도 있다.

function increaseNumber() {
    count++;
    number.textContent = count;
}

 

 

13. 네 번째 이벤트 예제: 입력한 이름으로 인사하기

13.1 HTML 코드

<input type="text" id="nameInput" placeholder="이름을 입력하세요">
<button id="greetButton">인사하기</button>
<p id="greeting"></p>

 

13.2 JavaScript 코드

const nameInput = document.getElementById("nameInput");
const greetButton = document.getElementById("greetButton");
const greeting = document.getElementById("greeting");

function greetUser() {
    const userName = nameInput.value;
    greeting.textContent = userName + "님, 반갑습니다.";
}

greetButton.addEventListener("click", greetUser);

 

value는 입력 상자에 사용자가 입력한 값을 가져오는 속성이다.

사용자가 입력 상자에 민수를 입력하고 버튼을 클릭하면 다음 문장이 표시된다.

민수님, 반갑습니다.

 

 

13.3 입력값 검사하기

사용자가 이름을 입력하지 않고 버튼을 클릭할 수도 있다. 이 경우 조건문을 사용하여 입력값을 검사한다.

function greetUser() {
    const userName = nameInput.value;

    if (userName === "") {
        greeting.textContent = "이름을 입력하여 주세요.";
    } else {
        greeting.textContent = userName + "님, 반갑습니다.";
    }
}

 

전체 코드는 다음과 같다.

const nameInput = document.getElementById("nameInput");
const greetButton = document.getElementById("greetButton");
const greeting = document.getElementById("greeting");

function greetUser() {
    const userName = nameInput.value;

    if (userName === "") {
        greeting.textContent = "이름을 입력하여 주세요.";
    } else {
        greeting.textContent = userName + "님, 반갑습니다.";
    }
}

greetButton.addEventListener("click", greetUser);

 

---

 

14. 다섯 번째 이벤트 예제: 마우스를 올리면 글자 변경하기

14.1 HTML 코드

<div id="box">마우스를 올려 보세요.</div>

 

14.2 JavaScript 코드

const box = document.getElementById("box");

function changeText() {
    box.textContent = "마우스가 올라왔습니다.";
}

box.addEventListener("mouseover", changeText);

 

사용자가 요소 위에 마우스를 올리면 mouseover 이벤트가 발생한다.

마우스가 요소 밖으로 나갔을 때 원래 문장으로 되돌리려면 mouseout 이벤트를 사용한다.

function resetText() {
    box.textContent = "마우스를 올려 보세요.";
}

box.addEventListener("mouseout", resetText);

 

전체 코드는 다음과 같다.

const box = document.getElementById("box");

function changeText() {
    box.textContent = "마우스가 올라왔습니다.";
}

function resetText() {
    box.textContent = "마우스를 올려 보세요.";
}

box.addEventListener("mouseover", changeText);
box.addEventListener("mouseout", resetText);

 

---

 

15. 여섯 번째 이벤트 예제: 실시간 글자 수 확인하기

15.1 HTML 코드

<textarea id="textInput" placeholder="내용을 입력하세요"></textarea>
<p>글자 수: <span id="count">0</span></p>

 

15.2 JavaScript 코드

const textInput = document.getElementById("textInput");
const count = document.getElementById("count");

function countCharacters() {
    count.textContent = textInput.value.length;
}

textInput.addEventListener("input", countCharacters);

 

input 이벤트는 사용자가 입력 내용을 변경할 때마다 발생한다.

length는 문자열의 글자 수를 구하는 속성이다.

실행 과정은 다음과 같다.

1. 사용자가 입력 상자에 글자를 입력한다.
2. input 이벤트가 발생한다.
3. countCharacters 함수가 실행된다.
4. 입력값의 글자 수를 계산한다.
5. 계산된 글자 수를 화면에 표시한다.

---

16. 익명 함수로 이벤트 처리하기

함수를 별도로 선언하지 않고 addEventListener() 안에 직접 작성할 수도 있다.

const button = document.getElementById("messageButton");

button.addEventListener("click", function () {
    console.log("버튼을 클릭하였습니다.");
});

 

이름이 없는 함수를 익명 함수라고 한다.

두 코드는 같은 역할을 수행한다.

• 이름이 있는 함수

function showMessage() {
    console.log("버튼을 클릭하였습니다.");
}

button.addEventListener("click", showMessage);

 

• 익명 함수

button.addEventListener("click", function () {
    console.log("버튼을 클릭하였습니다.");
});

 

초보자는 먼저 이름이 있는 함수를 사용하여 함수와 이벤트의 관계를 이해하는 것이 좋다.

---

17. 화살표 함수로 이벤트 처리하기

JavaScript에서는 화살표 함수를 사용할 수도 있다.

button.addEventListener("click", () => {
    console.log("버튼을 클릭하였습니다.");
});

 

다음 두 코드는 유사한 역할을 한다.

function () {
    console.log("클릭");
}

 

() => {
    console.log("클릭");
}

 

초보 단계에서는 일반 함수 문법을 먼저 익힌 후 화살표 함수를 학습하는 것이 이해하기 쉽다.

---

18. 종합 예제: 간단한 계산기

18.1 HTML 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>간단한 계산기</title>
</head>
<body>
    <h1>두 수 더하기</h1>

    <input type="number" id="number1" placeholder="첫 번째 수">
    <input type="number" id="number2" placeholder="두 번째 수">

    <button id="addButton">더하기</button>

    <p>결과: <span id="result">0</span></p>

    <script src="script.js"></script>
</body>
</html>

 

18.2 JavaScript 코드

const number1 = document.getElementById("number1");
const number2 = document.getElementById("number2");
const addButton = document.getElementById("addButton");
const result = document.getElementById("result");

function addNumbers() {
    const value1 = Number(number1.value);
    const value2 = Number(number2.value);

    const sum = value1 + value2;

    result.textContent = sum;
}

addButton.addEventListener("click", addNumbers);

 

18.3 코드 실행 순서

1단계: HTML 요소 가져오기

const number1 = document.getElementById("number1");
const number2 = document.getElementById("number2");
const addButton = document.getElementById("addButton");
const result = document.getElementById("result");

 

입력 상자, 버튼, 결과 표시 영역을 JavaScript로 가져온다.

2단계: 함수 선언하기

function addNumbers() {

 

두 수를 더하는 함수를 선언한다.

3단계: 입력값 가져오기

const value1 = Number(number1.value);
const value2 = Number(number2.value);

 

입력 상자의 값은 기본적으로 문자열이다. 따라서 Number()를 사용하여 숫자로 변환한다.예를 들어 문자열을 그대로 더하면 다음과 같은 결과가 나타날 수 있다.

"10" + "20"

 

결과는 숫자 30이 아니라 문자열 "1020"이다.

숫자로 변환하면 정상적인 덧셈이 수행된다.

Number("10") + Number("20")

결과는 다음과 같다.

30

 

4단계: 덧셈 계산하기

const sum = value1 + value2;

 

두 수를 더하여 sum 변수에 저장한다.

5단계: 결과 출력하기

result.textContent = sum;

 

계산 결과를 화면에 표시한다.

6단계: 이벤트 등록하기

addButton.addEventListener("click", addNumbers);

 

사용자가 버튼을 클릭하면 addNumbers 함수가 실행된다.

---

19. 함수와 이벤트의 핵심 구조

초보자는 다음 구조를 기억하면 된다.

19.1 HTML 요소 가져오기

const button = document.getElementById("button");

 

19.2 실행할 함수 만들기

function 실행할함수() {
    console.log("함수가 실행되었습니다.");
}

 

19.3 이벤트와 함수 연결하기

button.addEventListener("click", 실행할함수);

 

전체 구조는 다음과 같다.

const 요소 = document.getElementById("아이디");

function 함수이름() {
    실행할 코드;
}

요소.addEventListener("이벤트종류", 함수이름);

 

---

20. 자주 발생하는 오류

20.1 HTML의 id와 JavaScript의 이름이 다른 경우

HTML은 다음과 같다.

<button id="messageButton">클릭</button>

 

JavaScript에서 다른 이름을 사용하면 요소를 찾지 못한다.

const button = document.getElementById("messageBtn");

 

올바르게 작성하여야 한다.

const button = document.getElementById("messageButton");

 

 

---

20.2 함수 이름 뒤에 괄호를 작성한 경우

잘못된 예이다.

button.addEventListener("click", showMessage());

 

올바른 예이다.

button.addEventListener("click", showMessage);

 

 

20.3 <script> 위치가 잘못된 경우

JavaScript가 HTML 요소보다 먼저 실행되면 요소를 찾지 못할 수 있다.

다음과 같이 <body>의 마지막 부분에 <script>를 작성하는 것이 초보자에게 안전하다.

<body>
    <button id="button">클릭</button>

    <script src="script.js"></script>
</body>

 

 

20.4 문자열을 숫자로 변환하지 않은 경우

 

const number1 = "10";
const number2 = "20";

console.log(number1 + number2);

 

실행 결과는 다음과 같다.

1020

 

숫자로 계산하려면 Number()를 사용한다.

console.log(Number(number1) + Number(number2));

 

실행 결과는 다음과 같다.

30

 

 

20.5 브라우저 기능을 Node.js에서 실행한 경우

다음 객체와 함수는 웹브라우저에서 사용하는 기능이다.

document
alert()
window

 

따라서 다음 코드는 일반적인 Node.js 실행 환경에서는 오류가 발생한다.

alert("안녕하세요.");

 

브라우저에서는 사용할 수 있다.

<script>
    alert("안녕하세요.");
</script>

 

Node.js에서 결과를 확인하려면 console.log()를 사용하는 것이 적절하다.

console.log("안녕하세요.");

 

---

 

21. 핵심 정리

21.1 함수

함수는 여러 명령문을 하나로 묶어 필요할 때 실행하는 코드이다.

function sayHello() {
    console.log("안녕하세요.");
}

sayHello();

 

21.2 매개변수

매개변수는 함수에 값을 전달할 때 사용한다.

function greet(name) {
    console.log(name + "님, 안녕하세요.");
}

greet("민수");

 

21.3 반환값

return은 함수의 처리 결과를 함수 밖으로 전달한다.

function add(a, b) {
    return a + b;
}

const result = add(10, 20);

 

21.4 이벤트

이벤트는 클릭, 키보드 입력, 마우스 이동과 같이 웹페이지에서 발생하는 사건이다.

button.addEventListener("click", showMessage);

 

21.5 함수와 이벤트

이벤트가 발생하면 연결된 함수가 실행된다.

사용자 행동 → 이벤트 발생 → 함수 실행 → 화면 변경

 

 

---

22. 실습 문제

실습 1. 버튼을 클릭하면 인사말 출력하기

다음 조건을 만족하도록 작성한다.

• 버튼의 글자는 인사하기로 작성한다.
• 버튼을 클릭하면 안녕하세요. JavaScript입니다.를 출력한다.

<button id="helloButton">인사하기</button>
<p id="helloMessage"></p>

 

const helloButton = document.getElementById("helloButton");
const helloMessage = document.getElementById("helloMessage");

function showHello() {
    helloMessage.textContent = "안녕하세요. JavaScript입니다.";
}

helloButton.addEventListener("click", showHello);

 

 

실습 2. 버튼을 클릭하면 숫자 감소시키기

<h2 id="number">10</h2>
<button id="decreaseButton">1 감소</button>

 

const number = document.getElementById("number");
const decreaseButton = document.getElementById("decreaseButton");

let count = 10;

function decreaseNumber() {
    count--;
    number.textContent = count;
}

decreaseButton.addEventListener("click", decreaseNumber);

 

 

실습 3. 버튼을 클릭하면 글자색 변경하기

<p id="text">색상이 변경되는 문장입니다.</p>
<button id="colorButton">색상 변경</button>

 

const text = document.getElementById("text");
const colorButton = document.getElementById("colorButton");

function changeTextColor() {
    text.style.color = "blue";
}

colorButton.addEventListener("click", changeTextColor);