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!

Emiel Zuurbier · Accepted Answer · 2021-01-10 09:39:44Z

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>

edited Jan 10, 2021 at 9:39

answered Jan 9, 2021 at 21:52

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Baruch Karlin Over a year ago

Hey, Thank you for the elaborate answer. I tried your code but it still doesn't work. When I click on the btn nothing happens, when I inspect the btn in the browser no event listener shows up? I have tried the onclick attribute and inserting the text of the next url - that works, but this only works for one click and not what i need...

Emiel Zuurbier Over a year ago

Is your script loaded before the iframe and buttons?

Baruch Karlin Over a year ago

hey, it is now working. I separated the script into a new file. I don't know why but it was conflicting with other js in the file and no executing...

Collectives™ on Stack Overflow

Using array in document.getElementById.src not working

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related