ERROR: cannot read properties of undefined (reading 'offsetwidth')

26 Views Asked by At

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

0

There are 0 best solutions below