소개
게시글
질문&답변
2022.06.28
투두리스트 삭제기능 구현중 로컬 저장소 관련 질문
답변해주시면 감사하겠습니다 ㅜㅜ
- 1
- 1
- 303
질문&답변
2022.06.26
버튼을 눌렀을때 케러셀의 이동
nextindex: currentindex가 들어감 function scrollDiv 쪽에 있습니다!
- 0
- 2
- 509
질문&답변
2022.04.09
이미지가 안가려지는 에러
감사합니다!! 그럼 혹시 버튼을 눌렀을때 카드가 두장이 넘어간다면 자바스크립트쪽에서 에러가 있는거죠? 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 ' ; } }
- 0
- 5
- 230
질문&답변
2022.04.06
이미지가 안가려지는 에러
어디가 문제일까요 ㅜㅜ
- 0
- 5
- 230
질문&답변
2022.04.06
버튼 자바스크립트 오류
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 > inflearn span > 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 > 댓글 1 span > button class =" transparent "> img src = " images/icons/heart.png "/> button > div > li > li class =" comment "> div > span > 댓글 2 span > 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코드 파일입니다!!
- 0
- 2
- 335