버튼 자바스크립트 오류
621
ckc08283832
6 asked
0
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화window.addEventListener('load', function() {
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화window.addEventListener('load', function() {
var carousels = document.getElementsByClassName('carousel');
//케러셀 이벤트를 등록하는 로직
for(var i = 0; i < carousels.length; i++) {
addEventToCarousel(carousels[i]); // 현재해당하는 carousels 가져옴(배열)
}
});
function addEventToCarousel(carouselElem) {
var ulElem = carouselElem.querySelector('ul');
var liElems = ulElem.querySelectorAll('li');
//너비값 조정
var liWidth = liElems[0].clientWidth;
var adjustedWidth = liElems.length * liWidth;
ulElem.style.width = adjustedWidth + 'px';
//슬라이더 버튼 이벤트 등록
var slideButtons = carouselElem.querySelectorAll('.slide');
//슬라이드 버튼 갯수만큼 반복
for (var i=0; i < slideButtons.length; i++) {
slideButtons[i].addEventListener('click', createListenerSlide(carouselElem));
}
}
//클로저로 해서 캐러셀을 이벤트가 호출될때 바뀌지 않고 사용하기 위해
function createListenerSlide(carouselElem) {
return function(event) { //event는 매개변수고 이 블록안에서 사용가능
var clickedButton = event.currentTarget;//현재 클릭한 버튼 가져오기
// 값 가져오기
var liElems = carouselElem.querySelectorAll('li');
var liCount = liElems.length;
var currentIndex = carouselElem.attributes.data.value;
//currentIndex : 현재 보고있는 이미지의 순번
//carouselElem의 모든 속성을 가져오고 데이터를 가져오겠다
//슬라이드 버튼 체크 right값을 포함하는지
//-1해주는이유는 다섯개일경우 마지막은 4가 마지막이기때문
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);
}
//인디케이터 업데이트
//슬라이드 버튼 보여줌 여부 업데이트
//새롭게 보여지는 이미지 인덱스 값을 현재 data 값으로 업데이트
carouselElem.attributes.data.value = currentIndex;
}
}
function scrollDiv(carouselElem, nextIndex) {
var scrollable = carouselElem.querySelector('div');
var liWidth = scrollable.clientWidth;
var newLeft = liWidth * nextIndex;
scrollable.scrollTo({left: newLeft, behavior: 'smooth'});
}
버튼을 눌러도 사진이 오른쪽으로 가지 않는데 어느 코드에서 에러가 난걸까요?????
HTML/CSS
javascript
Answer 2
0
<!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
안녕하세요,
정준영님.
제가 기존에 가지고 있던 html파일과 css파일을 그래도 활용하면서, 올려주신 코드만 넣어서 테스트를 해보았는데, 캐로셀이 오른쪽으로 이동하며 잘 작동합니다.
html 파일을 추가로 확인을 해야 어디서 발생했는지 오류를 정확히 확인할 수 있을 것 같습니다.
감사합니다.
unregistered 이라 뜨며 작동하지 않습니다.
0
50
1
공부한 내용을 블로그에 정리해서 올려도되나요?
0
93
1
sublime text 설치 불가
0
176
1
사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다
0
98
1
처음 질문과 옵션 관련 질문입니다.
0
89
1
마지막에 news 관련 질문
0
81
1
태그 닫는 단축키가 뭔가요?
0
169
1
강의에 사용하는 예제 코드 자료 있나요?
0
384
1
회원가입 폼 검증하기 실행이 안됩니다.
0
273
1
이미지랑 아이콘 파일을 어떻게 찾아요?
0
350
1
VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요
0
475
0
프로젝트 고민 해결이 안되어 다시 올립니다.
0
391
1
프로젝트 고민 다시올립니다.
0
445
1
친구와의 프로젝트 고민
0
418
1
화면 오른쪽 스크롤이 넘어가질 않아요!
0
514
1
학과 설정
0
328
2
회원가입폼 검증 -2 에서 문제가생겼습니다
0
328
1
card.html 버튼 위치
0
599
1
인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요
0
355
2
carousel의 footer부분에
0
292
1
margin 값에 관한 질문입니다.
0
403
1
function clearMessages() 함수의 원리를 알고싶습니다
0
317
1
removeEventListener
0
233
1
버튼을 눌렀을때 케러셀의 이동
0
806
2