JavaScript clientWidth hatası

H

|-Hakan-|

Hectopat
Katılım
19 Ağustos 2018
Mesajlar
680
Çö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.

[CODE title="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>[/CODE]
[CODE title="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;
}[/CODE]
[CODE title="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)';
});[/CODE]
 
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
 

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.
 
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.

Ready to check - Nu Html Checker

validator.w3.org

Ö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:
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…