form 태그 관련
체크박스 활용하기
체크박스의 체크 상태를 확인할 때는 입력양식의 checked 속성을 사용
체크 상태일 때만 타이머를 증가시키는 프로그램
change 이벤트가 발생했을때 체크 박스의 상태를 확인하고 setInterval() 함수 또는 clearInterval() 함수를 실행
setInterval - 지정된 시간 간격마다 지정된 기능을 반복 실행
clearInterval - setInterval 중단
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D-Day for love</title>
</head>
<body>
<input type="checkbox">
<span>타이머 활성화</span>
<h1></h1>
<script>
/*
*/
document.addEventListener('DOMContentLoaded', () => {
let [timer, timerId] = [0, 0];
const h1 = document.querySelector('h1');
const checkbox = document.querySelector('input');
checkbox.addEventListener('change', (event) => {
// if(event.currentTarget.checked) { // checked 속성을 사용
if(checkbox.checked) {
// 체크상태
timerId = setInterval(() => {
timer += 1; // 1씩 증가
h1.textContent = `${timer}초`;
}, 1000); // 1초마다
}
else {
// 체크 해제 상태
clearInterval(timerId);
}
});
});
</script>
</body>
</html>
