How to add class to an element in Html or via Javascript?

Question

I want to add a class to an element via javascript and it does not work. If I trying to add via html it still does not work. It's the active class.

 var sliderIndex = 0; let next2 = document.querySelector(".next2"); let prev2 = document.querySelector(".prev2"); function showNews(n) { debugger; const slider = document.getElementsByClassName('news'); const dots = document.getElementsByClassName('dot'); for (i = 0; i < slider.length; i++) { slider[i].style.display = 'none'; } if (n < 0) { sliderIndex = slider.length - 1; } if (n > slider.length - 1) { sliderIndex = 0 } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", " "); } slider[sliderIndex].style.display = 'block'; dots[sliderIndex].classList.add('active') } function currentSlide(n) { showNews(sliderIndex = n) } function incrementSlides2(n) { showNews((sliderIndex += n)) } next2.addEventListener("click", function () { incrementSlides2(1); }); prev2.addEventListener("click", function () { incrementSlides2(-1); }); showNews(sliderIndex)

 #section-three .slideshow-container2 { position: relative; } #section-three .slideshow-container2 .prev2, #section-three .slideshow-container2 .next2 { top: 50%; background: blue; font-size: 18px; border-radius: 0 3px 3px 0; width: auto; position: absolute; padding: 16px; } #section-three .slideshow-container2 .next2 { right: 0; border-radius: 3px 0 0 3px; } #section-three .slideshow-container2 .prev2:hover, #section-three .slideshow-container2 .next2:hover { background-color: rgba(0, 0, 0, 0.8); } #section-three .slideshow-container2 .buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 4rem; } #section-three .slideshow-container2 .buttons .company-btn, #section-three .slideshow-container2 .buttons .industry-btn { margin: 1.5rem; display: inline-block; padding: 0.8rem 1rem; background: black; border-radius: 0; -webkit-transition: 0s; transition: 0s; } #section-three .slideshow-container2 .buttons .company-btn:hover { background: white; color: black; } #section-three .slideshow-container2 .buttons .industry-btn { background: white; color: black; } #section-three .slideshow-container2 .buttons .industry-btn:hover { background: black; color: white; } #section-three .slideshow-container2 .news-content, #section-three .slideshow-container2 .news2-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 600px; background: white; text-align: center; } #section-three .slideshow-container2 .news-content p, #section-three .slideshow-container2 .news2-content p { font-size: 1.2rem; padding: 2rem 8rem; } #section-three .slideshow-container2 .news-content h1, #section-three .slideshow-container2 .news2-content h1 { font-family: Arial, Helvetica, sans-serif; font-size: 1.5rem; } #section-three .slideshow-container2 .news2-content { background: white; display: -ms-grid; display: grid; -ms-grid-rows: (1fr)[3]; grid-template-rows: repeat(3, 1fr); -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); padding: 1.5rem 6rem; } #section-three .slideshow-container2 .buttons { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1/4; -ms-grid-row: 1; grid-row: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 1rem; } #section-three .slideshow-container2 .media-room { -ms-grid-row: 2; grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; } #section-three .slideshow-container2 .img { -ms-grid-column: 1; -ms-grid-column-span: 1; grid-column: 1/2; -ms-grid-row: 3; grid-row: 3; margin-right: 1rem; } #section-three .slideshow-container2 .texter { -ms-grid-column: 2; -ms-grid-column-span: 2; grid-column: 2/4; -ms-grid-row: 3; grid-row: 3; padding: 0 !important; } #section-three .slideshow-container2 .wiew-more { color: green; -ms-grid-row: 4; grid-row: 4; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1/4; } #section-three .slideshow-container2 #dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #section-three .slideshow-container2 #dots .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; -webkit-transition: background-color 0.6s ease; transition: background-color 0.6s ease; } #section-three .slideshow-container2 #dots .dot:hover, #section-three .slideshow-container2 #dots .dot .active { background: black; }

 <section id="section-three"> <div class="container slideshow-container2"> <div class="news"> <div class="news-content"> <div class="buttons"> <a class="btn company-btn" href="#">COMPANY NEWS</a> <a class="btn industry-btn" href="#">INDUSTRY NEWS</a> </div> <h1>OUR PEOPLE ARE OUT STONGEST ASSET </h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptate fugiat, molestias adipisci voluptas nisi blanditiis a aliquid accusantium omnis, soluta animi praesentium ipsam fugit? Non ea nisi optio dolores.voluptate fugiat, molestias adipisci voluptas nisi blanditiis a aliquid accusantium omnis, soluta animi praesentium ipsam fugit? Non ea nisi optio dolores. </p> <a class="my-2 wiew-more" href="#">WIEW MORE</a> </div> </div> <div class="news news2"> <div class="news2-content"> <div class="buttons"> <a class="btn company-btn" href="#">COMPANY NEWS</a> <a class="btn industry-btn" href="#">INDUSTRY NEWS</a> </div> <h1 class="media-room">MEDIA ROOM </h1> <div class="img"> <img src="/Core/img/media.jpg" style="width:500px" alt=""> </div> <p class="texter">London, June 2019 – If you want to enjoy wireless technology while gaming an unnoticeable latency is key. Sennheiser introduces the GSP 670, Sennheiser's first wireless gaming headset. The GSP 670 gives gamers significantly more freedom of movement than wired models. The audio specialist has integrated a proprietary low-latency connection that guarantees a reliable and stable transmission with near-zero delay. In addition, the GSP 670 offers Sennheiser's renowned wearing comfort and premium audio performance. </p> <a class="my-2 wiew-more" href="#">WIEW MORE2</a> </div> </div> <div id="dots"> <span class="dot width" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> </div> <a href="javascript:void(0);" class="prev2">Prev</a> <a href="javascript:void(0);" class="next2">Next</a> </div> </section>

Answer 1

const dots = document.getElementsByClassName('dot'); dots[sliderIndex].classList.add('active')

You are adding the class to one of the elements which already has the class dot

#section-three .slideshow-container2 #dots .dot .active

But you have a descendant combinator between the .dot class selector and the .active class selector. The element with active isn't a descendant of the element with dot , it is the same element. Remove the combinator.