커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
JavaScript 질문
undefined주차
박*균
댓글
3
・
추천
0
・
조회수
10
조회수
10
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
아래의 빨간색 버튼을 눌러서 버킷리스트를 추가하도록 하는 JavaScript를 짜야하는데
JavaScript는 거의 아예 모르겠어서 뭐라고 검색해야할지 잘 모르겠어요 ㅜㅜ
작성한 코드 및 에러 메세지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영원한 당신의 버킷리스트</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
</style>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body class="bg">
<audio class="bgm center" controls autoplay>
<source src="bgm.mp3" type="audio/mpeg">
</audio>
<h1 class="title-t5 center">SPARTHON Bucket List</h1>
<p class="msg center">꿈은 꾸는 것이 아니라, 이루는 것이다!</p>
<p class="bkt_submit">
<input type="text" id="bkt_submit" placeholder="내용을 입력하세요">
<button type="submit" class="btn btn-danger submit">+</button>
</p>
<div class="flex-row wrap">
<div class="bkt img1-t5 center">고양이 키우기</div>
<div class="bkt img2-t5 center">해외 여행 가기</div>
<div class="bkt img3-t5 center">몸 만들어보기<br>꾸준히 운동하기</div>
<div class="bkt img4-t5 center">만족스러운 곳에 취업하기</div>
<div class="bkt img5-t5 center">여자친구 만들기</div>
<div class="bkt img6-t5 center">금연하기</div>
</div>
<script>
</script>
<script src="script.js"></script>
</body>
</html>
-------------------------
// 페이지 로드 시 이전 상태 복원
document.addEventListener("DOMContentLoaded", (event) => {
const bkts = document.querySelectorAll(".bkt");
bkts.forEach((bkt, index) => {
// 로컬 스토리지에서 상태 읽기
const isDone = localStorage.getItem("bkt" + index) === "done";
if (isDone) {
bkt.classList.add("done");
}
});
});
// 버킷 리스트 클릭 이벤트
const bkts = document.querySelectorAll(".bkt");
bkts.forEach((bkt, index) => {
bkt.addEventListener("click", function () {
// 클래스 토글
bkt.classList.toggle("done");
// 로컬 스토리지에 상태 저장
if (bkt.classList.contains("done")) {
localStorage.setItem("bkt" + index, "done");
} else {
localStorage.setItem("bkt" + index, "");
}
});
});
댓글 알림
