JavaScript clientWidth hatası

|-Hakan-|

Hectopat
Katılım
19 Ağustos 2018
Mesajlar
629
Çözümler
4
Arkadaşlar şuradaki sorunu tam olarak çözemedim. Yardımcı olursanız sevinirim.
Sorun JavaScript'teki "const size = carouselImages[0].clientWidth;" kodunda Uncaught TypeError: Cannot read properties of undefined (reading 'clientWidth') hatasını veriyor.

HTML:
<div class="carousel-container">
                    <div class="carousel-slide">
                            <img class="a" src="pysa.jpg" id="lastClone" alt="">
                            <img class="a" src="toplantipp.jpg" alt="">
                            <img class="a" src="yazilim.jpg" alt="">
                            <img class="a" src="pysa.jpg" alt="">
                            <img class="a" src="toplantipp.jpg" id="firstClone" alt="">
                        </div>
                    </div>
                    <button id="prevBtn">Prev</button>
                    <button id="nextBtn">Next</button>
            </div>
        </div>
CSS:
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
.carousel-container{
    width: 100%;
    height: 150px;
    overflow: hidden;
}
.carousel-slide{
    display: flex;
    width: 100%;
    height: 150px;
}
.carousel-slide img{
    width: 100%;
    height: 150px;
}
JS:
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');

//Butonlar
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

//Counter(Sayaç)
let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

//buton komutları
nextBtn.addEventListener('click',() => {
        carouselSlide.style.transition = "transform 0.4s ease-in-out";
        counter++;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    });
prevBtn.addEventListener('click',() => {
        carouselSlide.style.transition = "transform 0.4s ease-in-out";
        counter++;
        carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    });
 

RaSGooL

Decipat
Katılım
26 Mart 2020
Mesajlar
480
Çözümler
17
Yer
Ankara
Eğer js dosyasını head arasında çağırıyor isen bu hatayı alması normal. Body altında tanımlanan veya yazman gerekiyor.
Eğer body altında tanımlanmış ise js deki kodlarını document.ready içerisinde tanımla. Bu sayede tüm html kodlar yüklenince senin script kodun çalışacaktır. Aklıma ilk bu geldi.
Onun haricinde array elemanı null gelebileceği için ?. ile veriyi okursan daha iyi olur. Şu şekilde coureselImage[0]?.clientWidth
 
KS
KS
H

|-Hakan-|

Hectopat
Katılım
19 Ağustos 2018
Mesajlar
629
Çözümler
4
Eğer JS dosyasını head arasında çağırıyor isen bu hatayı alması normal. Body altında tanımlanan veya yazman gerekiyor.
Eğer body altında tanımlanmış ise JSdeki kodlarını document. Ready içerisinde tanımla. Bu sayede tüm HTML kodlar yüklenince senin script kodun çalışacaktır. Aklıma ilk bu geldi.
Onun haricinde array elemanı null gelebileceği için? İle veriyi okursan daha iyi olur. Şu şekilde coureselımage[0]?clientwidth

JS dosyasını head başlığı arasında çağırıyordum ondan kaynaklıydı muhtemelen, yeni bir slider yaptığım için gerek kalmadı zaten teşekkürler yardımın için.
 

Primearc

Centipat
Katılım
3 Ocak 2021
Mesajlar
1.067
Makaleler
2
Çözümler
11
Yer
Matrix
Eğer js dosyasını head arasında çağırıyor isen bu hatayı alması normal. Body altında tanımlanan veya yazman gerekiyor.
Eğer body altında tanımlanmış ise js deki kodlarını document.ready içerisinde tanımla. Bu sayede tüm html kodlar yüklenince senin script kodun çalışacaktır. Aklıma ilk bu geldi.
Onun haricinde array elemanı null gelebileceği için ?. ile veriyi okursan daha iyi olur. Şu şekilde coureselImage[0]?.clientWidth
body altında tanımlamak yanlış bir kullanım şekli. w3.org body ve html kapanış etiketlerinin alt alta ve javascript tanımının da body kapanış etiketinin hemen üstünde olmasını söylüyor.


Örnek olarak bu kodu girersen sana uyarı verecektir:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>This is Hello World page</title>
</head>
<body>
     <h1>Hello World</h1>
</body>
<script> console.log("Hello World!")</script>
</html>

Şu ise doğru:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <title>This is Hello World page</title>
</head>
<body>
     <h1>Hello World</h1>
<script> console.log("Hello World!")</script>
</body>
</html>
 
Son düzenleme:
Yukarı