カルーセルスライドショーをJavaScriptで作成しています。
下記のコードだと
Uncaught TypeError: Cannot read properties of null (reading 'classList') at moveToSlide (main.js:16:17) at HTMLDivElement.<anonymous> (main.js:37:4)
というエラーが出てきます。(太字のremoveでエラーになっているみたいです)
エラーの意味と、解決方法を教えていただきたいです。
HTML
1 <div class="slide"> 2 <div class="images"> 3 <ul class="slide__ul"> 4 <li class="slide__li"> 5 <img src="~~~" class=" slide_img"/> 6 </li> 7 <li class="slide__li"> 8 <img src="~~~~" class=" slide_img" /> 9 </li> 10 <li class="slide__li"> 11 <img src="~~~~" class=" slide_img" /> 12 </li> 13 </ul> 14 </div> 15 <div class="slider content-width"> 16 <button class="sllider__btn "></button> 17 <button class="sllider__btn"></button> 18 <button class="sllider__btn "></button> 19 </div> 20 </div> 21 22
JavaScript
1const ul = document.querySelector('.slide__ul');//track 2const slides = Array.from(ul.children); 3const slider = document.querySelector('.slider');//Dotsnav 4const slider_btn = Array.from(slider.children);//dots 5const slideWidth = slides[0].getBoundingClientRect().width; 6 7function setSlidePosition (slider, i){ 8 slider.style.left = slideWidth *i +'px'; 9}; 10slides.forEach(setSlidePosition); 11 12function moveToSlide(ul , currentSlide , targetSlide){ 13 ul.style.transform = 'translateX(-' + targetSlide.style.left + ')'; 14 targetSlide.classList.add('current-slide'); 15** currentSlide.classList.remove('current-slide');** 16}; 17 18function updateBtn(currentBtn, target_btn){ 19 console.log(currentBtn); 20******_currentBtn.classList.remove('current-slide');_****** 21 target_btn.classList.add('current-slide'); 22 23}; 24 25 26//ボタンクリックスライド 27slider.addEventListener('click',e =>{ 28 const target_btn = e.target.closest('button');//クリックされたボタン 29 if(!target_btn) return; 30 const currentSlide = ul.querySelector('.current-slide');//表示要素 31 const currentBtn = slider.querySelector('.current-slide');//要素 32 const target_i = slider_btn.findIndex(btn => btn === target_btn);//押されたボタンのインデックス 33 const targetSlide = slides[target_i];//表示画像 34 35 console.log(currentBtn); 36 moveToSlide(ul,currentSlide ,targetSlide); 37 updateBtn(currentBtn, target_btn); 38 39}); 40 41
あなたの回答
tips
プレビュー