* 스켈레톤 코드 다운받기
라이브후javascript--controlling-event.zip
0.01MB
라이브전javascript-controlling-event.zip
0.01MB
▶ click 이벤트 실습
버튼을 클릭하면 숫자를 1씩 증가시키기
더보기
<!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>
<body>
<button id="btn">버튼</button>
<p>클릭횟수 : <span id="counter">0</span></p>
<script>
// 1. 버튼 선택
const btn = document.querySelector('#btn')
// console.log(btn)
// 2. 초기값 선언
let count = 0
// 3. 이벤트 핸들러 부착
btn.addEventListener('click', function (event) {
// 2.1 초기값 1 증가
count += 1
// 3.1 카운트 할 요소 선택
const spanTag = document.querySelector('#counter')
// 3.2 카운트 할 요소 안에 증가된 숫자를 재할당
spanTag.textContent = count
})
</script>
</body>
</html>▶ 결과
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript][event handler 활용] 3. click & input 이벤트 실습 (0) | 2024.04.22 |
|---|---|
| [JavaScript][event handler 활용] 2. 사용자의 입력 값을 실시간으로 출력하기 (0) | 2024.04.22 |
| [JavaScript][event handler 활용] 0. 목차 (0) | 2024.04.22 |
| [JavaScript][Event] 버블링, 이벤트가 정확히 어디서 발생했는지 접근할 수 있는 방법 (0) | 2024.04.22 |
| [JavaScript][Event] event handler (0) | 2024.04.22 |