classList.remove[“active”] isn’t working as I expected

I’m trying to make a map gallery which consist in show 3 diferent locations using two buttons (previous and next). I added functionality to the next button but when I click on next, the map doesn’t move and it stays. For the first map that I wanted to show, I added “active” to the classes. I’m pretty lost right now, any suggestion or advice will be very appreciated.

Javascript

 const prevBtn = document.querySelector(".prev");
 const nextBtn = document.querySelector(".next");
 const mapGallery = document.querySelectorAll(".maps-gallery");
 //console.log(mapGallery);
 let currentlySelected = 0;
  
 prevBtn.addEventListener("click",function(){


 });

 nextBtn.addEventListener("click",function(){
   console.log(currentlySelected, mapGallery.length)
   if (currentlySelected >= mapGallery.length - 1) return;
   mapGallery[currentlySelected].classList.remove["active"];
   currentlySelected++;
   mapGallery[currentlySelected].classList.add["active"];
   prevBtn.disabled = false
   if (mapGallery.length === currentlySelected +1 ){
     nextBtn.disabled = true;
 
 }
 });

CSS

.maps-gallery{
  display: none;
}
.active {
  display: block;
}
.maps{
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML

<div class ="maps">
                  <iframe  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d209569.44700750793!2d-56.380275318336025!3d-34.84309361411796!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x959f802b6753b221%3A0x3257eb39860f05a6!2sPalacio%20Salvo!5e0!3m2!1sen!2suy!4v1614269355326!5m2!1sen!2suy" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" class ="maps-gallery active"></iframe>
                  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d92110.09563909167!2d17.958933187703266!3d59.32686333113927!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" class = "maps-gallery" ></iframe>
                  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" class = "maps-gallery" ></iframe>
                  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" class ="maps-gallery" ></iframe>
              </div> 
              <div class="btns">
                    <button disabled  class="btn prev">Prev</button>
                    <button class= "btn next" >Next</button>

Answer

DOMTokenList.remove is a method. So, you need to call it with () instead of []. This is the same with .add().

mapGallery[currentlySelected].classList.remove("active"); mapGallery[currentlySelected].classList.add("active");

Advertisement

Answer