How to show “next” and “previous” buttons of a item in a array?

Im trying to use a array who contains 4 diferent maps. The first element of the array must be “sticked” and change the current element of the array by clicking next. The next button when it reaches to the last item of the array must be showed disabled. The previous button is disabled and when the next is clicked it should be unabled. Im pretty lost right now any suggestion or advice will be very welcomed

var i = 0;
var mapsArray = [
  "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",
  "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",
  "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",
  "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"
];
document.getElementById('myIframe').src = mapsArray[Math.floor(Math.random() * mapsArray.length)];

const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");


function nextBtn() {
  i = i + 1;
  i = i % mapsArray.length;
  return mapsArray[i];

}

function prevBtn() {
  if (i === 0) {
    i = mapsArray.length;
  }
  i = i - 1;
  return mapsArray[i]
}

.maps {
  display: flex;
  justify-content: center;
  align-items: center;
}

#myIframe {
  width: 600px;
  height: 600px;
}

<div class="maps">
  <iframe id='myIframe' class="maps-gallery active"></iframe>

</div>
<div class="btns">
  <button disabled onclick="nextBtn()" class="btn prev">Prev</button>
  <button onclick="prevBtn()" class="btn next">Next</button>

Answer

1. you can not have button name and function calling the same name hence the error in console.

2. save your iframe in variable and then do iFrame.src = mapsArray[i] inside both back and next functions.

3. Check the index numbers in functions and accordingly disable the buttons based on first/last/middle number of index array.

var i = 0;
var mapsArray = [
  "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",
  "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",
  "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",
  "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"
];

let iFrame = document.getElementById('myIframe')
iFrame.src = mapsArray[Math.floor(Math.random() * mapsArray.length)];

const prevB = document.querySelector(".prev");
const nextB = document.querySelector(".next");


function nextBtn() {
  console.clear()
  if (i >= 0 && i < 3) {
    iFrame.src = mapsArray[i]
    prevB.disabled = false
    console.log("next button array index set:" + i)
    i++
  } else {
    iFrame.src = mapsArray[i]
    nextB.disabled = true
    console.log("next button array index set:" + i)
    i++
  }
}

function prevBtn() {
  if (i === 0) {
    i = mapsArray.length;
  }
  i = i - 1;
  console.clear()
  console.log("prev array index:" + i)
  if (i <= 3 && i > 0) {
    iFrame.src = mapsArray[i]
    nextB.disabled = false
  } else {
    iFrame.src = mapsArray[i]
    prevB.disabled = true
  }


}

.maps {
  display: flex;
  justify-content: center;
  align-items: center;
}

#myIframe {
  width: 150px;
  height: 150px;
}

<div class="maps">
  <iframe id='myIframe' class="maps-gallery active"></iframe>

</div>
<div class="btns">
  <button disabled onclick="prevBtn()" class="btn prev">Prev</button>
  <button onclick="nextBtn()" class="btn next">Next</button>
</div>