inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

웹 프론트엔드를 위한 자바스크립트 첫걸음

북마크 아이템 추가하기

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

해결된 질문

517

인프런

작성한 질문수 1

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

javascript dom

답변 1

1

효빈 Hyobin

안녕하세요 :)

올려주신 코드를 보면 아래의 코드에서 에러가 발생한 것을 볼 수 있는데요,

document
  .getElementById("bookmark-item-add-btn")
  .addEventListener("click", newBookmarkToggle);

getElementById를 통해 요소를 가져왔지만, 아래에 보이시는 코드처럼 해당 요소에는 bookmark-item-add-btn 이라는 class 이름만 있을 뿐 동일한 이름의 id가 설정되지 않았습니다.

<div class="bookmark-item-add-btn">+ 북마크 추가</div>

 위 요소에 id 값을 동일하게 적용해주시면 될 것 같습니다!!

1

인프런

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

브라우져 호환성 문의

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