북마크 추가 부분에 오류가 생겼어요.
안녕하세요!
강의 잘 보고있습니다! 에러가 생겨도 찾아서 다 수정 가능했는데 이번 addEventListener 오류는 아무리 찾아봐도 왜 오류가 생기는지 이유를 모르겠어서 질문글 작성해요 ㅠㅠ
제가 어디서 잘못했을까요..
<div class="bookmark-item-add-btn">+ 북마크 추가</div>
<div class="bookmark-item-input-form" id="bookmark-item-input-form">
<div class="bookmark-input">
<div class="new-bookmark-name">
<div class="label">이름</div>
<input id="new-bookmark-name-input" />
</div>
<div class="new-bookmark-url">
<div class="label">주소</div>
<input id="new-bookmark-url-input" />
</div>
</div>
<div class="bookmark-item-input-btn">
<div class="cancel-btn" id="cancel-btn">취소</div>
<div class="add-btn" id="add-btn">추가</div>
</div>
</div>
</div>
<script src="./js/clock.js"></script>
<script src="./js/search.js"></script>
<script src="./js/quote.js"></script>
<script src="./js/bookmark-toggle.js"></script>
<script src="./js/bookmark.js"></script>
</body>
</html>
아래는 bookmark.js파일이에요
const newBookmarkForm = document.getElementById("bookmark-item-input-form");
let bookmarkList = [];
if (localStorage.getItem("bookmarkList")) {
bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
} else {
localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));
}
let isAddBtnClick = false;
newBookmarkForm.style.display = "none";
const newBookmarkToggle = () => {
isAddBtnClick = !isAddBtnClick;
isAddBtnClick
? (newBookmarkForm.style.display = "block")
: (newBookmarkForm.style.display = "none");
};
document
.getElementById("bookmark-item-add-btn")
.addEventListener("click", newBookmarkToggle);


답변 1
1
안녕하세요 :)
올려주신 코드를 보면 아래의 코드에서 에러가 발생한 것을 볼 수 있는데요,
document
.getElementById("bookmark-item-add-btn")
.addEventListener("click", newBookmarkToggle);getElementById를 통해 요소를 가져왔지만, 아래에 보이시는 코드처럼 해당 요소에는 bookmark-item-add-btn 이라는 class 이름만 있을 뿐 동일한 이름의 id가 설정되지 않았습니다.
<div class="bookmark-item-add-btn">+ 북마크 추가</div>위 요소에 id 값을 동일하게 적용해주시면 될 것 같습니다!!
브라우져 호환성 문의
0
69
2
4-23 Promise객체 12:05 코드 질문
0
60
2
<div class="bookmark-item-add-btn"> 질문
0
58
2
랜덤이미지
0
61
2
"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다
1
72
2
북마크바 디폴트가 "북마크 열기"로 뜹니다.
1
132
1
홈페이지 이미지 추가 방법 문의드립니다!
0
116
2
북마크 추가 버튼 활성화 오류 문의드립니다!
0
115
1
북마크바 배치 문의드립니다!
0
115
2
명언 설정하는데 위치설정 오류가 있어요!
0
143
2
4:45 부터 무한로딩되어 재생이 안됩니다ㅠ
1
105
1
BigInt Type 에 대하여
0
89
1
계속 헷갈리네요. 이게 맞나요?
1
149
2
섹션 7 - 7 프로젝트 적용하기
1
121
2
섹션7 - 7 프로젝트 적용하기
0
89
1
섹션7-4 api사용해서 명언 설정하기
0
136
2
6분 53초 질문입니당
1
119
2
왜 전부다 div태그로 만드는지 궁금합니다.
1
235
2
[수업질문] bookmark.js에서
0
131
2
최종 프로젝트 적용
0
184
2
append&appendChild+메소드 호출
1
139
1
코드샌드박스 업데이트
0
171
2
async pending상태의 promise객체
1
153
2
화면이 다릅니다.
1
179
1





