What I want this code to do is display a button called Map. And above that some text should read "Chose a display". Then once that 'Map' button is clicked, it then displays a google map image through the tags.
<html>
<head>
<title>Random</title>
</head>
<body>
<p align="center"style="font-family:verdana;"id="googlemap">
Choose a Display
</p>
<script>
function mapFunction()
{
x=document.getElementById("googlemap"); // Find the element
x.src="<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" https://www.google.com.au/maps?f=d&source=s_d&saddr=23+Burgundy+St,+Carseldine+QLD&daddr=90+Gilbert+Rd,+Grange+QLD+to:Narrowneck+Court+Surfers+Paradise,+204+Ferny+Ave,+Surfers+Paradise+QLD&hl=en&geocode=FfOeXv4d6qweCSn9XcBQSP2TazGVQ_0hH3aSYA%3BFRKQXf4d5_QeCSlRy4j_0lmRazEdtrkd8CRD0Q%3BFWXtVP4dWCUlCSGK90q-pKXOZCmv-18SewWRazGK90q-pKXOZA&aq=0&oq=Narr&sll=-27.422699,153.02411&sspn=0.004819,0.008272&t=h&mra=ls&ie=UTF8&ll=-27.555764,153.208466&spn=0.584401,0.878906&z=10&output=embed"></iframe>; // Change the content
}
</script>
<button type="button" onclick="mapFunction()">Map</button>
</body>
</html>
4 Answers 4
I think you mean innerHTML
var x = document.getElementById("googlemap"); // Find the element
x.innerHTML = '<iframe src="url here" ...></iframe>';
Since the HTML contains ", you can either escape them with \ or just wrap the entire string with single quotes '.
Also, you forgot the src for the iframe.
1 Comment
Two things:
You do not want to change the
srcof x, instead try modifying theinnerHTML.Your iframe tag is both malformed (the URL should be prefixed with
src="and there is no such thing as amarginwidthormarginheightattribute) and is not contained properly within the string (all dublequotes should be escaped\"like this\")
So, this should work:
function mapFunction()
{
x=document.getElementById("googlemap"); // Find the element
x.innerHTML = "<iframe width=\"640\" height=\"480\" frameborder=\"0\" scrolling=\"no\" style=\"margin-height:0;margin-width:0;\" src=\"https://www.google.com.au/maps?f=d&source=s_d&saddr=23+Burgundy+St,+Carseldine+QLD&daddr=90+Gilbert+Rd,+Grange+QLD+to:Narrowneck+Court+Surfers+Paradise,+204+Ferny+Ave,+Surfers+Paradise+QLD&hl=en&geocode=FfOeXv4d6qweCSn9XcBQSP2TazGVQ_0hH3aSYA%3BFRKQXf4d5_QeCSlRy4j_0lmRazEdtrkd8CRD0Q%3BFWXtVP4dWCUlCSGK90q-pKXOZCmv-18SewWRazGK90q-pKXOZA&aq=0&oq=Narr&sll=-27.422699,153.02411&sspn=0.004819,0.008272&t=h&mra=ls&ie=UTF8&ll=-27.555764,153.208466&spn=0.584401,0.878906&z=10&output=embed\"></iframe>"; // Change the content
}
Comments
A p-element can never have an src-attribute. Or you create the iframe with an empty src value / or you use x.innerHTML to write the iframe in.
As others said before, you need to \"escape the quotes\"
Comments
It's because, one you need to use innerHTML , and two, you need to not close your quotes when setting innerHTML
x.innerHTML='<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com.au/maps?f=d&source=s_d&saddr=23+Burgundy+St,+Carseldine+QLD&daddr=90+Gilbert+Rd,+Grange+QLD+to:Narrowneck+Court+Surfers+Paradise,+204+Ferny+Ave,+Surfers+Paradise+QLD&hl=en&geocode=FfOeXv4d6qweCSn9XcBQSP2TazGVQ_0hH3aSYA%3BFRKQXf4d5_QeCSlRy4j_0lmRazEdtrkd8CRD0Q%3BFWXtVP4dWCUlCSGK90q-pKXOZCmv-18SewWRazGK90q-pKXOZA&aq=0&oq=Narr&sll=-27.422699,153.02411&sspn=0.004819,0.008272&t=h&mra=ls&ie=UTF8&ll=-27.555764,153.208466&spn=0.584401,0.878906&z=10&output=embed"></iframe>';
x.innerHTML='iframe stuff';