• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

북마크 추가 부분에 오류가 생겼어요.

23.06.27 15:42 작성 조회수 311

1

안녕하세요!

강의 잘 보고있습니다! 에러가 생겨도 찾아서 다 수정 가능했는데 이번 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);

스크린샷 2023-06-27 오후 3.36.41.png스크린샷 2023-06-27 오후 3.37.24.png

답변 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 값을 동일하게 적용해주시면 될 것 같습니다!!

인프런님의 프로필

인프런

질문자

2023.06.27

감사합니다! 정상작동되네요 :)