투두리스트 삭제기능 구현중 로컬 저장소 관련 질문

답변해주시면 감사하겠습니다 ㅜㅜ

버튼을 눌렀을때 케러셀의 이동

nextindex: currentindex가 들어감 function scrollDiv 쪽에 있습니다!

이미지가 안가려지는 에러

감사합니다!! 그럼 혹시 버튼을 눌렀을때 카드가 두장이 넘어간다면 자바스크립트쪽에서 에러가 있는거죠? window.addEventListener('load', function() { var carousels = document.getElementsByClassName('carousel'); //dom문법을 쓴다는건 객체를 의미한다 //케러셀 이벤트를 등록하는 로직 //캐러셀 랭스: for(var i = 0; i carousels.length; i++) { addEventToCarousel(carousels[i]); // 현재해당하는 carousels 가져옴(배열) } }); //carouselELem에는 carousels[i]가 들어가짐 function addEventToCarousel(carouselElem) { var ulElem = carouselElem.querySelector('ul'); var liElems = ulElem.querySelectorAll('li'); //너비값 조정 var liWidth = liElems[0].clientWidth; //현재 li의 너비값 : 600px이옴 var adjustedWidth = liElems.length * liWidth; //이미지 갯수 * 너비 ulElem.style.width = adjustedWidth + 'px';//2400px이 됌 //슬라이더 버튼 이벤트 등록 , 슬라이드에 대한 객체 정보 다빼옴 var slideButtons = carouselElem.querySelectorAll('.slide'); //슬라이드 버튼 갯수만큼 반복 for (var i=0; i slideButtons.length; i++) { //왼쪽버튼 오른쪽버튼 총 2번을 반복한다. slideButtons[i].addEventListener('click', createListenerSlide(carouselElem)); } } //슬라이드 버트을 누를때 이벤트를 클로저로 사용하기위해 //클로저로 해서 캐러셀을 이벤트가 호출될때 바뀌지 않고 사용하기 위해 //버튼이 담겨잇는 케러셀만 가져올수있도록 클로저를 이용 function createListenerSlide(carouselElem) { return function(event) { //event는 매개변수고 이 블록안에서 사용가능 var clickedButton = event.currentTarget;//현재 클릭한 버튼 가져오기 //클릭이라는 이벤트가 발동됐을때 return함수가 호출이된다. // 값 가져오기 var liElems = carouselElem.querySelectorAll('li'); var liCount = liElems.length; //길이는 4야 var currentIndex = carouselElem.attributes.data.value; //currentIndex : 현재 보고있는 이미지의 순번 //carouselElem의 모든 속성을 가져오고 데이터를 가져오겠다 //슬라이드 버튼 체크 right값을 포함하는지 //-1해주는이유는 4개일경우 마지막은 3이 마지막이기때문 if(clickedButton.className.includes('right') && currentIndex liCount - 1) { currentIndex ++; scrollDiv(carouselElem, currentIndex); //위에서 3이라면 ++되므로 4번의 위치로 스크롤을 조정해주는 역할 } else if(clickedButton.className.includes('left') && currentIndex > 0) { currentIndex --; //0이면 왼쪽으로 못넘김 scrollDiv(carouselElem, currentIndex); } //인디케이터 업데이트 updateIndicator(carouselElem, currentIndex); //슬라이드 버튼 보여줌 여부 업데이트 updateSlideButtonvisible(carouselElem, currentIndex, liCount); //새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트 carouselElem.attributes.data.value = currentIndex; //만약 currentIndex가 2라면 1에서 2로 바뀌는것 } } //다음으로 이동할 매개변수로 nextIndex 이용 function scrollDiv(carouselElem, nextIndex) { var scrollable = carouselElem.querySelector('div');//오버플로 히든되는 var liWidth = scrollable.clientWidth;//div의 사이즈 600이라 600이올거임 var newLeft = liWidth * nextIndex; //2번을 하야된다 하면 1200px이 움직일것 scrollable.scrollTo({left: newLeft, behavior: 'smooth'}); } function updateIndicator(carouselElem, currentIndex) { var indicators = carouselElem.querySelectorAll('footer > div'); for (var i = 0; i indicators.length; i++) { if (currentIndex == i) { indicators[i].className = 'active'; } else { indicators[i].className = ''; } } } function updateSlideButtonvisible(carouselElem, currentIndex, liCount) { var left = carouselElem.querySelector('.slide-left'); var right = carouselElem.querySelector('.slide-right'); if (currentIndex > 0) { left.style.display = 'block'; } else { left.style.display = 'none'; } if(currentIndex liCount - 1) { right.style.display = 'block'; } else { right.style.display = 'none'; } }

이미지가 안가려지는 에러

어디가 문제일까요 ㅜㅜ

버튼 자바스크립트 오류

DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta http-equiv="X-UA-Compatible" content="IE=edge"> meta name="viewport" content="width=device-width, initial-scale=1.0"> link rel="stylesheet" href="style/card.css"/> script src="script/carousel.js" defer>script> title>인스타그램title> head> body> section class="container"> article class="card"> header> div class="circle-image"> img src = "images/profile.png"/> div> div class="card-username"> span>inflearnspan> div> div class="option-more"> button class="transparent">img src="images/icons/mark.png"/>button> div> header> main> div class="carousel" data="0"> 케러셀 들어갈 영역--> div> 이 박스는 슬라이드를 위한 div--> ul> li>img src="images/mountain1.jpg"/>li> li>img src="images/mountain2.jpg"/>li> li>img src="images/mountain3.jpg"/>li> li>img src="images/mountain4.jpg"/>li> ul> 첨엔 왼쪽 버튼 안보여야해 display:none 실시--> div class="slide slide-left" style = "display: none"> button class="transparent"> img src ="images/icons/arrow-left.png"/> button> div> div class="slide slide-right"> button class="transparent"> img src ="images/icons/arrow-right.png"/> button> div> div> footer>얘는 밖으로 빼야 같이 안가려짐--> div class="active">div> div>div> div>div> div>div> footer> div> div class="card-container"> div class="card-buttons"> div> button class="transparent"> img src = "images/icons/heart.png"/> button> div> div> button class="transparent"> img src = "images/icons/chat.png"/> button> div> div> button class="transparent"> img src = "images/icons/paper-plane.png"/> button> div> div class="last-card-button"> button class="transparent"> img src = "images/icons/bookmark.png"/> button> div> div> div class="card-likes"> 좋아요 999,999개 div> div class="card-content"> ul> li> div> span>본문내용span> div> li> li class="comment"> div> span>댓글 1span> button class="transparent"> img src = "images/icons/heart.png"/> button> div> li> li class="comment"> div> span>댓글 2span> button class="transparent"> img src = "images/icons/heart.png"/> button> div> li> ul> div> div class="card-time"> 7일전 div> div> main> footer class="card-comment"> input type="text" placeholder="댓글 달기"/> div> button class="transparent"> 게시물 button> div> footer> article> section> script type="text/javascript" src="script/carousel.js">script> body> html> html코드 파일입니다!!