I have an issue with offsetWidth. I´m trying to do a slider.ParentElement is right apparently, but offsetWidth is not working, console gives the following error:
cannot read properties of undefined (reading 'offsetwidth').
Here's my code:
var sliderContainer = document.querySelectorAll('.jl-slider-container');
var sliderList = document.querySelectorAll('.jl-slider-list');
var sliderItem = document.querySelectorAll('.jl-slider-item');
var containerWidth = sliderContainer.parentElement.offsetWidth;
console.log(containerWidth);
HTML:
<section class="jl-full-height">
<div class="container-fluid jl-no-padding">
<div class="row">
<div class="col-sm-2">
<div class="jl-portfolio-navigator">
<div class="jl-navigator-counter">
<span class="jl-text-green">01</span>
</div>
<nav class="jl-item-navigator">
<a href="#" class="jl-item-active"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</nav>
<div class="jl-itens-next-prev jl-radius-left">
<div class="jl-itens-prev">
<ion-icon name="arrow-dropleft"></ion-icon>
</div>
<div class="jl-itens-counter"><span>01</span>/<span>05</span></div>
<div class="jl-itens-next">
<ion-icon name="arrow-dropright"></ion-icon>
</div>
</div>
</div>
</div>
<div class="col-sm-10">
<div class="jl-slider-container jl-full-height ">
<ul class="jl-slider-list">
<li class="jl-slider-item blue">
</li>
<li class="jl-slider-item orange">
</li>
<li class="jl-slider-item yellow">
</li>
<li class="jl-slider-item gray">
</li>
<li class="jl-slider-item purple">
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
offsetWidth not showing the width