There seems to be an issue with the functionality of Js .classList.add()

Question

There seems to be an issue with the functionality of Js .classList.add()

Currently, I am in the process of creating a simple movie site and am working on the home page. On the home page, there is a carousel. In CSS, I have hidden the visibility of all slides, and my plan is to create an array for all the slides in JavaScript and switch between them when the arrow icon is clicked.

As a first step, I want to activate the 1st slide when the web page is loaded. I used the .classList.add() property to activate the 1st element of the array, but it's not working properly.

Please help me figure this out.

javascript html css

Answer 1

Answer №1

Give this a shot

const slides = [...av2012,...av2015,...av2018,...av2019];

The (...) in the code snippet above is known as the spread operator, which conveniently provides you with all the elements of an array.

Answer 2

Give this a shot

const slides = [...av2012,...av2015,...av2018,...av2019];

The (...) in the code snippet above is known as the spread operator, which conveniently provides you with all the elements of an array.

Answer 3

Answer №2

When using JS and querySelectorAll to search for all occurrences, the method returns an array of results. To access the first result in the array, simply use index 0:

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>

Answer 4

When using JS and querySelectorAll to search for all occurrences, the method returns an array of results. To access the first result in the array, simply use index 0:

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>

There seems to be an issue with the functionality of Js .classList.add()

Answer №1

Answer №2

Similar questions

Content creator: Enhancing HTML search functionality using parameters

Video background is malfunctioning on Firefox and Internet Explorer

Dealing with nested JSON objects in NodeJS may result in the return of [Object

Automatically collapse the Shadcn-UI Accordion when the mouse exits

What is the best way to incorporate new elements into the DOM in order to allow users to share their comments

What is the best way to resize an image in HTML based on a percentage of its height?

modifying the state in a stateless React component

Aligning Description Item components horizontally in antdLearn how to easily horizontally align Description

Overflow scroll block containing a table within a div element

Building a unique mobile number input box with country code in HTML

What if there was a magical jQuery method that could automatically trigger a callback function? What could it possibly be named?

Locate the cookie and perform a single redirect in PHP

Turn an item by x degrees, not towards x degrees

Route creation unsuccessful while attempting to both download a file and send a response message, resulting in the error "Headers cannot be set after they have been sent to the client."

I am struggling to understand why clicking this button is not successfully submitting the form to Google Sheets

Struggling with aligning a div in the center

Uploading files via an HTML form

To include the express module in another JavaScript file, simply require it at the top of the file using the following code: `

Twitter posting unsuccessful: Issue encountered - Your current access is restricted to certain Twitter API v2 endpoints along with limited v1.1 endpoints like media post and oauth

Tips for resetting an angular smart filter when the reset button is clicked