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

Question

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 1

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");

Answer 2

I tweaked your code a little to slide frames instead of changing the display from none to block:

 const mapsGallery = document.querySelectorAll('.maps-gallery'); const nextBtn = document.querySelector('.nextBtn'); const prevBtn = document.querySelector('.prevBtn'); mapsGallery.forEach(function(x, index) { x.style.left = `${index * 100}%`; }); let counter = 0; nextBtn.addEventListener('click', function() { counter++; carousel(); }); prevBtn.addEventListener('click', function() { counter--; carousel(); }); const carousel = () => { if (counter < mapsGallery.length - 1) { nextBtn.disabled = false; } else { nextBtn.disabled = true; } if (counter > 0) { prevBtn.disabled = false; } else { prevBtn.disabled = true; } mapsGallery.forEach((x) => { x.style.transform = `translateX(-${counter * 100}%)`; }); }; prevBtn.disabled = true;

 .maps-gallery { height: 450px; width: 450px; position: absolute; transition: all.2s ease; }.maps { display: flex; width: 450px; height: 450px; margin: 0 auto; max-width: 80rem; position: relative; overflow: hidden; margin-top: 4rem; }.btn-container { display: flex; justify-content: center; margin-top: 1rem; }

 <div class ="maps"> <div class ="maps-gallery"> <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="100%" height="100%" style="border.0." allowfullscreen="" loading="lazy" ></iframe> </div> <div class ="maps-gallery"> <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="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" ></iframe> </div> <div class ="maps-gallery"> <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="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" ></iframe> </div> <div class ="maps-gallery"> <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="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" ></iframe> </div> </div> <div class="btn-container"> <button type="button" class="prevBtn"> prev </button> <button type="button" class="nextBtn"> next </button> </div>