javascript - Using array in document.getElementById.src not working

Question

Im trying to use an array (or var) to input into the src of an tag. when I use the text of the url the browser can display the second src but when I turn it into a var -array it doesn't seem to work:

this is my 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>     

this is my Js:

let jlm = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108513.70308822051!2d35.10531865599252!3d31.796299428569416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d7d634c1fc4b%3A0xd96f623e456ee1cb!2sJerusalem!5e0!3m2!1sen!2sil!4v1610023043184!5m2!1sen!2sil";

let rome = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d190029.0177339561!2d12.395913509664267!3d41.90998597323602!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f6196f9928ebb%3A0xb90f770693656e38!2sRome%2C%20Metropolitan%20City%20of%20Rome%2C%20Italy!5e0!3m2!1sen!2sil!4v1610023162463!5m2!1sen!2sil";

let listOfCitys = [jlm, rome];


function myFunction() {

    document.getElementById("myFrame").src = listOfCitys[0];

}

I am trying to create a loop so that each time i click the btn it will iterate the src in the array. but just putting one of the vars into the src is not working.

Thank you!

question from:https://stackoverflow.com/questions/65647626/using-array-in-document-getelementbyid-src-not-working

Answer 1

Start of by tracking which location is active at the moment. This could look like:

let currentCityIndex = 0;

This way you can select a src from the listOfCitys array.

listOfCitys[currentCityIndex];

When you want to go to the next increment the index and select a new item from the array.

currentCityIndex++;
listOfCitys[currentCityIndex];

And do the same for previous with decrement.

currentCityIndex--;
listOfCitys[currentCityIndex];

Now the currentCityIndex does not know how many items the listOfCitys array has. So before incrementing or decrementing you'll have to check the current state and if the next action will be within minimum and maximum range of the array (0 and listOfCitys.length - 1).

const frame = document.getElementById("myFrame");

const prevCity = document.getElementById('prevbutton');
const nextCity = document.getElementById('nextbutton');

let jlm = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108513.70308822051!2d35.10531865599252!3d31.796299428569416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d7d634c1fc4b%3A0xd96f623e456ee1cb!2sJerusalem!5e0!3m2!1sen!2sil!4v1610023043184!5m2!1sen!2sil";
let rome = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d190029.0177339561!2d12.395913509664267!3d41.90998597323602!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f6196f9928ebb%3A0xb90f770693656e38!2sRome%2C%20Metropolitan%20City%20of%20Rome%2C%20Italy!5e0!3m2!1sen!2sil!4v1610023162463!5m2!1sen!2sil";

let listOfCitys = [jlm, rome];
let currentCityIndex = 0;

prevCity.addEventListener('click', () => {
  // If the current index is already the first item..
  if (currentCityIndex === 0) {
    // ..Then go to the last..
    currentCityIndex = listOfCitys.length - 1;
  } else {
    // ..Otherwise to the previous.
    currentCityIndex--;
  }
  frame.src = listOfCitys[currentCityIndex];
});

nextCity.addEventListener('click', () => {
  // If the current index is already the last item..
  if (currentCityIndex === listOfCitys.length - 1) {
    // ..Then go to the start..
    currentCityIndex = 0;
  } else {
    // ..Otherwise to the next.
    currentCityIndex++;
  }
  frame.src = listOfCitys[currentCityIndex];
});

<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">Next Location</button>
</div>