Js .classList.add() is not working properly
Question
I'm in a procces of creaing simple movie site. cruntly working there home page. in the home page there is a carosol.
in CSS I hidden the visibility of all slide. what I'm going do is in JS creat a array for all silds and switch between silds when I clicked the arrow icon.
as a first stem I want to active 1st slide when we load the web. so I used .classList.add() property to active 1st element of the array. but it's not work propaly.
please help to short this out.
let left=document.querySelector('.left'); let right=document.querySelector('.right'); let av2012 = document.querySelectorAll('.Av2012'); let av2015 = document.querySelectorAll('.Av2015'); let av2018 = document.querySelectorAll('.Av2018'); let av2019 = document.querySelectorAll('.Av2019'); let slides=[av2012,av2015,av2018,av2019]; let index=0; let active= slides[index].classList.add('active');
body{ font-family: 'Roboto', sans-serif; margin: 20px 40px 0 40px; } .head{ display: flex; justify-content: space-between; } ul{ list-style: none; display: flex; gap: 100px; } #searchBar{ width: 600px; height: 50px; border-radius: 17px; } input{ font-size: 1.5em; position: relative; left:20px; } button{ border: none; background-color: transparent; position: relative; left:-50px; top: 5px; z-index: 10; cursor: pointer; } .arrow{ display: flex; justify-content: space-between; align-items: center; height: 100vh; } .left, .right{ cursor: pointer; z-index: 10; } .right{ transform: rotatey(180deg); } .movies{ display: flex; justify-content: space-evenly; top:-550px; position: relative; } .active{ visibility: visible; } .deactive{ visibility: hidden; } .Av2012, .Av2015, .Av2018, .Av2019{ width: 800px; display: flex; align-items: center; gap: 30px; position: absolute; visibility: hidden; } h2, h3{ margin-top: 0; margin-bottom: 0; } .about{margin-top: 20px;}
<body> <div class="head"> <div class="logo"> <img src="Assets\logo.png" alt="website logo" width="60px" height="60px"> </div> <div class="searchBar"> <form action="search"> <input type="text" placeholder="Find HD Movies and TV show" name="seach" id="searchBar"> <button> <img src="Assets\search icon.svg" alt="searchIcon"> </button> </form> </div> <div class="navigation"> <ul> <li>Genre</li> <li>Year</li> <li>Rating</li> </ul> </div> </div> <div class="arrow"> <div class="left"> <img src="Assets\left arrow.svg" alt="go left side"> </div> <div class="right"> <img src="Assets\left arrow.svg" alt="go right side"> </div> </div> <div class="movies"> <div class="Av2012"> <div class="poster"><img src="Assets\The Avengers 2012.jpg" alt="avengers 2012 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>The Avengers 2012 </h2></div> <div class="rating"><h3>8/10 IMDb</h3></div> <div class="about">Nick Fury is compelled to launch the Avengers Initiative when Loki poses a threat to planet Earth. His squad of superheroes put their minds together to accomplish the task.</div> </div> </div> <div class="Av2015"> <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2015 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Age of Ultron 2015 </h2></div> <div class="rating"><h3>7.3/10 IMDb</h3></div> <div class="about">Tony Stark builds an artificial intelligence system named Ultron with the help of Bruce Banner. When the sentient Ultron makes plans to wipe out the human race, the Avengers set out to stop him.</div> </div> </div> <div class="Av2018"> <div class="poster"><img src="Assets\The Avengers 2018.jpg" alt="avengers 2018 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Infinity War 2018 </h2></div> <div class="rating"><h3>8.4/10 IMDb</h3></div> <div class="about">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.</div> </div> </div> <div class="Av2019"> <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2019 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Endgame 2019</h2></div> <div class="rating"><h3>8.4/10 IMDb</h3></div> <div class="about">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</div> </div> </div> </div> <script src="script.js"></script> </body>
2 answers
solution1
0 2022-07-23 06:55:53
In JS, querySelectorAll returns an array of results since you're searching for all occourances. All you should need to do is get index 0 of the result:
let left=document.querySelector('.left'); let right=document.querySelector('.right'); let av2012 = document.querySelectorAll('.Av2012')[0]; let av2015 = document.querySelectorAll('.Av2015')[0]; let av2018 = document.querySelectorAll('.Av2018')[0]; let av2019 = document.querySelectorAll('.Av2019')[0]; let slides=[av2012,av2015,av2018,av2019]; let index=0; let active= slides[index].classList.add('active');
body{ font-family: 'Roboto', sans-serif; margin: 20px 40px 0 40px; } .head{ display: flex; justify-content: space-between; } ul{ list-style: none; display: flex; gap: 100px; } #searchBar{ width: 600px; height: 50px; border-radius: 17px; } input{ font-size: 1.5em; position: relative; left:20px; } button{ border: none; background-color: transparent; position: relative; left:-50px; top: 5px; z-index: 10; cursor: pointer; } .arrow{ display: flex; justify-content: space-between; align-items: center; height: 100vh; } .left, .right{ cursor: pointer; z-index: 10; } .right{ transform: rotatey(180deg); } .movies{ display: flex; justify-content: space-evenly; top:-550px; position: relative; } .active{ visibility: visible; } .deactive{ visibility: hidden; } .Av2012, .Av2015, .Av2018, .Av2019{ width: 800px; display: flex; align-items: center; gap: 30px; position: absolute; visibility: hidden; } h2, h3{ margin-top: 0; margin-bottom: 0; } .about{margin-top: 20px;}
<body> <div class="head"> <div class="logo"> <img src="Assets\logo.png" alt="website logo" width="60px" height="60px"> </div> <div class="searchBar"> <form action="search"> <input type="text" placeholder="Find HD Movies and TV show" name="seach" id="searchBar"> <button> <img src="Assets\search icon.svg" alt="searchIcon"> </button> </form> </div> <div class="navigation"> <ul> <li>Genre</li> <li>Year</li> <li>Rating</li> </ul> </div> </div> <div class="arrow"> <div class="left"> <img src="Assets\left arrow.svg" alt="go left side"> </div> <div class="right"> <img src="Assets\left arrow.svg" alt="go right side"> </div> </div> <div class="movies"> <div class="Av2012"> <div class="poster"><img src="Assets\The Avengers 2012.jpg" alt="avengers 2012 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>The Avengers 2012 </h2></div> <div class="rating"><h3>8/10 IMDb</h3></div> <div class="about">Nick Fury is compelled to launch the Avengers Initiative when Loki poses a threat to planet Earth. His squad of superheroes put their minds together to accomplish the task.</div> </div> </div> <div class="Av2015"> <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2015 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Age of Ultron 2015 </h2></div> <div class="rating"><h3>7.3/10 IMDb</h3></div> <div class="about">Tony Stark builds an artificial intelligence system named Ultron with the help of Bruce Banner. When the sentient Ultron makes plans to wipe out the human race, the Avengers set out to stop him.</div> </div> </div> <div class="Av2018"> <div class="poster"><img src="Assets\The Avengers 2018.jpg" alt="avengers 2018 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Infinity War 2018 </h2></div> <div class="rating"><h3>8.4/10 IMDb</h3></div> <div class="about">The Avengers must stop Thanos, an intergalactic warlord, from getting his hands on all the infinity stones. However, Thanos is prepared to go to any lengths to carry out his insane plan.</div> </div> </div> <div class="Av2019"> <div class="poster"><img src="Assets\The Avengers 2015.jpg" alt="avengers 2019 movie poster" width="240px" height="400px"></div> <div class="discripction"> <div class="title"><h2>Avengers: Endgame 2019</h2></div> <div class="rating"><h3>8.4/10 IMDb</h3></div> <div class="about">After Thanos, an intergalactic warlord, disintegrates half of the universe, the Avengers must reunite and assemble again to reinvigorate their trounced allies and restore balance.</div> </div> </div> </div> <script src="script.js"></script> </body>
solution2
0 ACCPTED 2022-07-23 06:59:02
Try this
let slides = [...av2012,...av2015,...av2018,...av2019];
This (...) is called spread operator it gives you the elements of an array
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
js optimization for classList.Add
classList.add() is not working in JavaScript
Javascript classList.add is not working
classList.add() not working in a function?
vanilla js - classList.add not working, but className does work?
Function parameters not working with .classList.add
classList.add() is not working | Vanilla JavaScript
CSS transition not working with classList.add
The element modifiers classList.add and classList.remove not working as expected
jQuery addClass working but javascript classList.add not working
Related Tags