Javascript 在document.getElementById.src中使用数组不起作用

我试图使用数组（或var）来输入标记的src。当我使用url的文本时，浏览器可以显示第二个src，但当我将其转换为var数组时，它似乎不起作用：

这是我的html：

    <iframe id="myFrame" src= "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24190.105180007897!2d-73.84374818788723!3d40.72323027714316!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25e394b6cc0b9%3A0xf15c2215b49863c4!2zUmVnbyBQYXJrLCDXp9eV15XXmdeg16EsINeg15nXlSDXmdeV16jXpywg15DXqNem15XXqiDXlNeR16jXmdeq!5e0!3m2!1siw!2sil!4v1609851520165!5m2!1siw!2sil" > </iframe>

    <div class="btn-container">
        <button class="switch-buttons" id="prevbutton" >Prev Location</button> 
        <button class="switch-buttons" id="nextbutton" onclick="myFunction()">Next Location</button>
    </div>     

我试图创建一个循环，以便每次单击btn时，它都会在数组中迭代src。但是仅仅将其中一个VAR放入src是不起作用的

---

谢谢大家!

通过跟踪当前处于活动状态的位置开始。这可能看起来像：

let currentCityIndex = 0;

这样，您可以从

listOfCitys

数组中选择src

listOfCitys[currentCityIndex];

如果要转到下一个增量，请单击索引并从数组中选择新项

currentCityIndex++;
listOfCitys[currentCityIndex];

并使用减量对上一个执行相同的操作

currentCityIndex--;
listOfCitys[currentCityIndex];

现在，

currentCityIndex

不知道

listOfCitys

数组有多少项。因此，在递增或递减之前，您必须检查当前状态以及下一个操作是否在数组的最小和最大范围内（

0

和

listOfCitys.length-1

）

const frame=document.getElementById（“myFrame”）；
const prevCity=document.getElementById（'prevbutton'）；
const nextCity=document.getElementById（'nextbutton'）；
让jlm=”https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d108513.70308822051！2d35.10531865599252！3d31.796299428569416！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！10x1502D67D634C4B%30xD96F623E456EE1CB！2耶路撒冷！5e0！3m2！1sen！2sil！4v1610023043184！5m2！1sen！2sil“；
让罗马=”https://www.google.com/maps/embed?pb=！1m18！1m12！1m3！1d190029.0177339561！2d12.395913509664267！3d41.90998597323602！2m3！1f0！2f0！3m2！1i1024！2i768！4f13.1！3m3！1m2！1S0X132F6196F9928下跌%3A0XB90F7706963656E38！2罗马%2C%大都会城市%20%202C%意大利%202C！5e0！3m2！3m2！1sen！2sil！4V161002363！2sil！”；
让listOfCitys=[jlm，罗马]；
设currentCityIndex=0；
prevCity.addEventListener（'单击'，（）=>{
//如果当前索引已经是第一项。。
如果（currentCityIndex==0）{
//…然后去最后一个。。
currentCityIndex=listOfCitys.length-1；
}否则{
//..与前一条相反。
当前城市指数--；
}
frame.src=listOfCitys[currentCityIndex]；
});
nextCity.addEventListener（'click'，（）=>{
//如果当前索引已经是最后一项。。
如果（currentCityIndex==listOfCitys.length-1）{
//..然后开始。。
currentCityIndex=0；
}否则{
//…否则，请转到下一个。
currentCityIndex++；
}
frame.src=listOfCitys[currentCityIndex]；
});

上一位置
下一个位置
嘿，谢谢你详尽的回答。我试过你的代码，但还是不起作用。当我点击btn时，什么都没有发生，当我在浏览器中检查btn时，没有显示事件侦听器？我尝试了onclick属性并插入下一个url的文本-这很有效，但这只适用于一次单击，而不是我需要的…您的脚本是否加载到iframe和按钮之前？嘿，它现在正在工作。我将脚本分离成一个新文件。我不知道为什么，但它与文件中的其他js冲突，并且没有执行。。。
currentCityIndex--;
listOfCitys[currentCityIndex];