There's an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') console.log(slid[numberArray].classList) is working fine, but slid[numberArray].classList.add('active') is not working. I know my code isn't great, but I'm still learning and trying to build a slider from scratch.
const slid = [...document.querySelectorAll('.slid')];
const arrows = document.querySelectorAll('.arrows-slider .arrow');
slid.forEach(s => {
if( s.classList.contains('active') == false){
s.style.opacity = '0';
}
});
arrows.forEach( arrow =>{
arrow.addEventListener('click', function(){
if(this.classList.contains('arrows-right')){
slid.forEach(s => {
if( s.classList.contains('active')){
s.classList.remove('active');
let numberArray = slid.indexOf(s);
numberArray ++;
slid[numberArray].classList.add('active');
console.log(slid[numberArray].classList);
}
});
}else if( this.classList.contains('arrows-left')){
}
});
});.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-image: url('../img/mirrored_squares.png');
height: 100vh;
}
.slid {
position: absolute;
width: 100%;
height: 100vh;
opacity: 0;
}
.active {
opacity: 1 !important;
}
.img-slid {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 35%;
height: 50%;
background-size: cover;
}
.engine {
background-image: url("../img/silnik.jpg");
}
.exhaust {
background-image: url("../img/wydech.jpg");
}
.slid-text {
position: absolute;
top: 50%;
left: 11%;
transform: translateY(-50%);
font-size: 8rem;
text-transform: uppercase;
color: #fff;
font-family: 'Black Ops One', cursive;
}
.number-slaid {
position: absolute;
bottom: 8%;
right: 8%;
font-size: 2rem;
color: #fff;
font-family: 'Black Ops One', cursive;
}
/* .arrows-left {
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
}
.line-arrow {
width: 2px;
height: 70px;
background-color: black;
}
.top-line {
transform: rotate(48deg) translateY(25%);
}
.bottom-line {
transform: rotate(-48deg) translateY(-25%);
} */
.arrows-left {
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%) rotate(45deg);
}
.arrows-right {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%) rotate(-135deg);
}
.arrow {
width: 80px;
height: 80px;
border-left: 2px solid #000;
border-bottom: 2px solid #000;
cursor: pointer;
}<section class="slider">
<div class="slid slid1 active">
<div class="engine img-slid"> </div>
<p class="slid-text">engine</p>
<p class="number-slaid">01</p>
</div>
<div class="slid slid2 ">
<div class="exhaust img-slid"></div>
<p class="slid-text">exhaust</p>
<p class="number-slaid">02</p>
</div>
<div class="arrows-slider">
<div class="arrows-left arrow"></div>
<div class="arrows-right arrow"></div>
</div>
</section>