북마크 추가 버튼 활성화 오류 문의드립니다!
0
세션 7 6.북마크 아이템 추가하기
북마크 추가 버튼을 클릭해도 이름, 주소, 취소, 추가 활성화되지 않고 있습니다.
어떠한 코드 오류가 있는 지 오류 코드 체크해주세요!
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));
}
const addBookmarkItem = () => {
let bookmarkList = [];
if (localStorage.getItem("bookmarkList")) {
bookmarkList = JSON.parse(localStorage.getItem("bookmarkList"));
}
let name = document.getElementById("new-bookmark-name-input").value;
let url = document.getElementById("new-bookmark-url-input").value;
let createAt = Date.now();
bookmarkList.push({ name: name, url: url, createAt: createAt });
localStorage.setItem("bookmarkList", JSON.stringify(bookmarkList));
document.getElementById("new-bookmark-name-input").value = "";
document.getElementById("new-bookmark-url-input").value = "";
newBookmarkToggle();
};
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);
document.getElementById("add-btn").addEventListener("click", addBookmarkItem);
document
.getElementById("cancel-btn")
.addEventListener("click", newBookmarkToggle);
(function () {
const bookmarkBar = document.getElementById("bookmark-bar");
const bookmarkOpen = document.getElementById("bookmark-open");
const bookmarkClose = document.getElementById("bookmark-close");
const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
if (isBookMarkBarOpen === "close") {
bookmarkBar.style.display = "none";
bookmarkOpen.style.display = "none";
bookmarkClose.style.display = "flex";
} else {
bookmarkBar.style.display = "block";
bookmarkOpen.style.display = "flex";
bookmarkClose.style.display = "none";
}
const bookmarkBarToggle = () => {
const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen");
if (isBookMarkBarOpen === "close") {
localStorage.setItem("isBookMarkBarOpen", "open");
bookmarkBar.style.display = "block";
bookmarkOpen.style.display = "flex";
bookmarkClose.style.display = "none";
return;
}
localStorage.setItem("isBookMarkBarOpen", "close");
bookmarkBar.style.display = "none";
bookmarkOpen.style.display = "none";
bookmarkClose.style.display = "flex";
};
document
.getElementById("bookmark-open-btn")
.addEventListener("click", bookmarkBarToggle);
document
.getElementById("bookmark-close-btn")
.addEventListener("click", bookmarkBarToggle);
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
rel="stylesheet"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>newtab</title>
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<div class="main-container">
<div class="main-wrapper">
<div class="today-info">
<div class="date" id="date">
<!-- 날짜&요일 -->
</div>
<div class="time" id="time">
<!-- 현재 시간 -->
</div>
</div>
<div class="search">
<input
id="search-input"
autocomplete="off"
placeholder="검색어를 입력하세요"
/>
</div>
</div>
<div class="quote" id="quote">
<!-- 명언 -->
</div>
</div>
<div class="bookmark-open" id="bookmark-open">
<div id="bookmark-open-btn">북마크 닫기</div>
</div>
<div class="bookmark-close" id="bookmark-close">
<div id="bookmark-close-btn">북마크 열기</div>
</div>
<div class="bookmark-bar" id="bookmark-bar">
<!-- 북마크바 -->
<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>
javascript
dom
回答 1
브라우져 호환성 문의
0
67
2
4-23 Promise객체 12:05 코드 질문
0
60
2
<div class="bookmark-item-add-btn"> 질문
0
58
2
랜덤이미지
0
59
2
"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다
1
72
2
북마크바 디폴트가 "북마크 열기"로 뜹니다.
1
130
1
홈페이지 이미지 추가 방법 문의드립니다!
0
115
2
북마크바 배치 문의드립니다!
0
114
2
명언 설정하는데 위치설정 오류가 있어요!
0
143
2
4:45 부터 무한로딩되어 재생이 안됩니다ㅠ
1
105
1
BigInt Type 에 대하여
0
87
1
계속 헷갈리네요. 이게 맞나요?
1
149
2
섹션 7 - 7 프로젝트 적용하기
1
120
2
섹션7 - 7 프로젝트 적용하기
0
88
1
섹션7-4 api사용해서 명언 설정하기
0
135
2
6분 53초 질문입니당
1
119
2
왜 전부다 div태그로 만드는지 궁금합니다.
1
232
2
[수업질문] bookmark.js에서
0
130
2
최종 프로젝트 적용
0
181
2
append&appendChild+메소드 호출
1
138
1
코드샌드박스 업데이트
0
168
2
async pending상태의 promise객체
1
151
2
화면이 다릅니다.
1
178
1
extensions 질문
1
1296
1