How to change iframe source pieces with javascript?

Question

So I am trying to make a function that can replace the src of the iframe. In the iframe there would be a map with two places. In the html code there are two forms for the place ID-s.

I just cannot get this to work.

Here is the HTML code:

<div id="start">
    <label for="startLocation">Start location ID:</label>
    <input type="text" id="startLocation" name="startLocation" value="" ><br><br>
</div>

<div id="dest">
    <label for="destination">Destination ID:</label>
    <input type="text" id="destination" name="destination" ><br><br>
</div>

<button onclick="changeMap()">Show the map!</button><br><br>

</form>


<iframe id="map" width="600" height="450" frameborder="0" style="border:0" src="" allowfullscreen></iframe>

This would be the function:

function changeMap(){

//place IDs to put into url
var start = document.getElementById('startLocation').value;

var dest = document.getElementById('destination').value;


//pieces of the url
var mapSource1 = "https://www.google.com/maps/embed/v1/directions?origin=place_id:";

var mapSource2 = "&destination=place_id:";

var mapSource3 = "&key=AIzaSyDMtNzjQdNk-FX1hz7IWVcNiby1B8xiZeg";

var mapSource = mapSource1+start+mapSource2+dest+mapSource3;

//iframe
var iframe = document.getElementById('map');

//changing the src of the iframe
iframe.src = mapSource;


}

Answer 1

The line

<button onclick="changeMap()">Show the map!</button><br><br>

may be causing the problem.

To begin with, button elements, if not given a type="button" , are considered submit buttons. So every time the button is pressed, the form gets submitted and the browser starts loading a different page before the JavaScript has time to do much.

Secondly, I see you are using onclick to attach the event handler. If your script has to be above the form in your HTML, this will result in changeMap being undefined. I would suggest attaching the event handler with JavaScript, something like this:

<button type="button" id="show-map">Show the map!</button><br><br>

var btn = document.getElementById('show-map');
btn.addEventListener('click', changeMap);

Note that because the this is selecting the button element right here, either the script tag must be placed below the button (so the button is around--can't select nothing!) or the JavaScript needs to be placed in a document.onReady function, so that the script won't fire until the page finishes loading (which means the button will be fully loaded).

Unless you're using document.onReady , the order of the script tag and button really matter. If the script references the button , the button comes first. If the button references the script , the script must come first.

Wrapping in some sort of document.onReady is common practice. jQuery has a function ( $.ready ) that can be used to do this, but if you're brave you can also do it without jQuery .

Also, keep in mind addEventListener doesn't work on older IE. You could polyfill it or use jQuery.