如何向这个HTML元素添加两个JavaScript函数

我正在尝试创建“上一个”和“下一个”按钮，在嵌入的谷歌地图图像上的不同位置循环，但在第一个位置隐藏“上一个”按钮，并在最后一个位置显示后让“下一个”按钮消失

我知道添加一个名为“hidden”的CSS类就可以了，但是我不知道该放在哪里，以及如何放

这是我的HTML代码。iframe元素是GoogleMaps，我给它一个id“mappy”，以便在JavaScript中更容易地选择它。地图下面是两个按钮

这是我的JavaScript代码。当前，“下一个”和“上一个”按钮仅在每个位置循环

var main_map=document.getElementById（'mappy'）；
变量映射=[
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d106094.85581787785！2d-118.22632098885458！3d33.80033081467724！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1s0x80c2cae84099d759%3A0XA103AFAC42A8FAA！2长%202C%20CA！5e0！3m2！1sen！2sus！4v1598942170840！5SEN！2sus'，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d7961373.37326689！2d96.9825121578134！3d13.010860368647212！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1S0X304D8DF7424DB1%3A0x9ed72c880757e802！2sus！5e0！3m2！1sen！2sus！4v1598948055475！5m2！1SUS，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d12436315.314415561！2d166.3019164867038！3d-40.448493377535335！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1s0x6d2c200e17779687%3A0xb1d618e2756a4733！2新西兰%20Zealand！5e0！3m2！1sen！2sus！4V15989334239！5m2！1sen！2sus，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1D2961694.651652496！2d115.15555667021819！3d-25.02365472591425！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1S0X2BFD0767C5DF%3A0x538267a1955b1352！2澳大利亚！5e0！3m2！1sen！2sus！4V15989449264！5m2！1sen！2sus'
];
变量i=0；//当前图像索引
var a；
函数prev（）{
如果（i=maps.length-1）i=-1；
i++；
返回setImg（）；
}
函数setImg（）{
返回main_map.setAttribute（'src'，maps[i]）；
}

&larr；以前的
Next&rarr；

肯定有更好的方法来实现这一点，但这可能是最简单的方法，因此您可以看到它是如何完成的，并且可能会重写得更好

   var main_map = document.getElementById('mappy');
    var previousBtn = document.getElementById('btn-prev');
    var nextBtn = document.getElementById('btn-next')
    var maps = [
      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus',
      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7961373.37326689!2d96.9825121578134!3d13.010860368647212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x304d8df747424db1%3A0x9ed72c880757e802!2sThailand!5e0!3m2!1sen!2sus!4v1598948055475!5m2!1sen!2sus',
      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12436315.314415561!2d166.3019164867038!3d-40.448493377535335!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d2c200e17779687%3A0xb1d618e2756a4733!2sNew%20Zealand!5e0!3m2!1sen!2sus!4v1598944334239!5m2!1sen!2sus',
      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29616594.651652496!2d115.15555667021819!3d-25.02365472591425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2b2bfd076787c5df%3A0x538267a1955b1352!2sAustralia!5e0!3m2!1sen!2sus!4v1598944469264!5m2!1sen!2sus'];
    var i = 0; // Current Image Index
    var a;
    
    function prev() {
      if (i <= 0) i = maps.length;
      i--;
      viewButtons(i);
      return setImg();
    }
    
    function next() {
      if (i >= maps.length - 1) i = -1;
      i++;
      viewButtons(i);
      return setImg();
    }

    function viewPrevious(index) {
     if (index === 0) {
       previousBtn.classList.add('hidden');
     } else {
       previousBtn.classList.remove('hidden'); 
     }
    }

    function viewNext(index) {
     if (index === maps.length - 1) {
       nextBtn.classList.add('hidden');
     } else {
       nextBtn.classList.remove('hidden'); 
     }
    }

    function viewButtons(index) {
     viewPrevious(index);
     viewNext(index);
    }
    
    function setImg() {
      return main_map.setAttribute('src', maps[i]);
    }

previousBtn.addEventListener('click', prev);
nextBtn.addEventListener('click', next);

viewButtons(i);

var main_map=document.getElementById（'mappy'）；
var-previousBtn=document.getElementById（'btn-prev'）；
var nextBtn=document.getElementById（'btn-next'）
变量映射=[
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d106094.85581787785！2d-118.22632098885458！3d33.80033081467724！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1s0x80c2cae84099d759%3A0XA103AFAC42A8FAA！2长%202C%20CA！5e0！3m2！1sen！2sus！4v1598942170840！5SEN！2sus'，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d7961373.37326689！2d96.9825121578134！3d13.010860368647212！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1S0X304D8DF7424DB1%3A0x9ed72c880757e802！2sus！5e0！3m2！1sen！2sus！4v1598948055475！5m2！1SUS，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d12436315.314415561！2d166.3019164867038！3d-40.448493377535335！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1s0x6d2c200e17779687%3A0xb1d618e2756a4733！2新西兰%20Zealand！5e0！3m2！1sen！2sus！4V15989334239！5m2！1sen！2sus，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1D2961694.651652496！2d115.15555667021819！3d-25.02365472591425！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1S0X2BFD0767C5DF%3A0x538267a1955b1352！2澳大利亚！5e0！3m2！1sen！2sus！4V15989449264！5m2！1sen！2sus']；
变量i=0；//当前图像索引
var a；
函数prev（）{
如果（i=maps.length-1）i=-1；
i++；
查看按钮（i）；
返回setImg（）；
}
函数viewPrevious（索引）{
如果（索引==0）{
previousBtn.classList.add（'hidden'）；
}否则{
previousBtn.classList.remove（'hidden'）；
}
}
函数viewNext（索引）{
if（index==maps.length-1）{
nextBtn.classList.add（'hidden'）；
}否则{
nextBtn.classList.remove（'hidden'）；
}
}
功能视图按钮（索引）{
视图（索引）；
viewNext（索引）；
}
函数setImg（）{
返回main_map.setAttribute（'src'，maps[i]）；
}
上一个BTN.addEventListener（“单击”，上一个）；
nextBtn.addEventListener（“单击”，下一步）；
查看按钮（i）；

肯定有更好的方法来实现这一点，但这可能是最简单的方法，因此您可以看到它是如何完成的，并且可能会重写得更好

   var main_map = document.getElementById('mappy');
    var previousBtn = document.getElementById('btn-prev');
    var nextBtn = document.getElementById('btn-next')
    var maps = [
      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d106094.85581787785!2d-118.22632098885458!3d33.80033081467724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2cae84099d759%3A0xa1003afac42a8faa!2sLong%20Beach%2C%20CA!5e0!3m2!1sen!2sus!4v1598942170840!5m2!1sen!2sus',
      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7961373.37326689!2d96.9825121578134!3d13.010860368647212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x304d8df747424db1%3A0x9ed72c880757e802!2sThailand!5e0!3m2!1sen!2sus!4v1598948055475!5m2!1sen!2sus',
      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12436315.314415561!2d166.3019164867038!3d-40.448493377535335!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6d2c200e17779687%3A0xb1d618e2756a4733!2sNew%20Zealand!5e0!3m2!1sen!2sus!4v1598944334239!5m2!1sen!2sus',
      'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29616594.651652496!2d115.15555667021819!3d-25.02365472591425!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2b2bfd076787c5df%3A0x538267a1955b1352!2sAustralia!5e0!3m2!1sen!2sus!4v1598944469264!5m2!1sen!2sus'];
    var i = 0; // Current Image Index
    var a;
    
    function prev() {
      if (i <= 0) i = maps.length;
      i--;
      viewButtons(i);
      return setImg();
    }
    
    function next() {
      if (i >= maps.length - 1) i = -1;
      i++;
      viewButtons(i);
      return setImg();
    }

    function viewPrevious(index) {
     if (index === 0) {
       previousBtn.classList.add('hidden');
     } else {
       previousBtn.classList.remove('hidden'); 
     }
    }

    function viewNext(index) {
     if (index === maps.length - 1) {
       nextBtn.classList.add('hidden');
     } else {
       nextBtn.classList.remove('hidden'); 
     }
    }

    function viewButtons(index) {
     viewPrevious(index);
     viewNext(index);
    }
    
    function setImg() {
      return main_map.setAttribute('src', maps[i]);
    }

previousBtn.addEventListener('click', prev);
nextBtn.addEventListener('click', next);

viewButtons(i);

var main_map=document.getElementById（'mappy'）；
var-previousBtn=document.getElementById（'btn-prev'）；
var nextBtn=document.getElementById（'btn-next'）
变量映射=[
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d106094.85581787785！2d-118.22632098885458！3d33.80033081467724！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1s0x80c2cae84099d759%3A0XA103AFAC42A8FAA！2长%202C%20CA！5e0！3m2！1sen！2sus！4v1598942170840！5SEN！2sus'，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d7961373.37326689！2d96.9825121578134！3d13.010860368647212！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1S0X304D8DF7424DB1%3A0x9ed72c880757e802！2sus！5e0！3m2！1sen！2sus！4v1598948055475！5m2！1SUS，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d12436315.314415561！2d166.3019164867038！3d-40.448493377535335！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1s0x6d2c200e17779687%3A0xb1d618e2756a4733！2新西兰%20Zealand！5e0！3m2！1sen！2sus！4V15989334239！5m2！1sen！2sus，
'https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1D2961694.651652496！2d115.15555667021819！3d-25.02365472591425！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1S0X2BFD0767C5DF%3A0x538267a1955b1352！2澳大利亚！5e0！3m2！1sen！2sus！4V15989449264！5m2！1sen！2sus']；
变量i=0；//当前图像索引
var a；
函数prev（）{
如果（i=maps.length-1）i=-1；