When using JavaScript to set the innerHTML of a div I have just one div that I cannot figure out why it is not being set...
I have the following code in my <body>
on my page
<div style="width:50%; margin:0 auto;">
<div id="name"></div>
<div id="image"></div>
<div id="description"></div>
</div>
<script>
var url = window.location.href;
var captured = /name=([^&]+)/.exec(url)[1];
var result = decodeURI(captured);
if (result != 'none') {
var name = document.getElementById('name');
name.innerHTML = "<p>" + result + "</p>";
var description = document.getElementById('description');
description.innerHTML = '<object data="descriptions/' + result + '.txt" style="font-family:Gotham, Helvetica, Arial, sans-serif"></object>'
var image = document.getElementById('image');
image.innerHTML = '<img style="float:left;" src="images/' + result + '.jpg">'
}
else {
document.write('You have no items in your cart');
var elem = document.getElementById('badge');
elem.parentNode.removeChild(elem);
}
</script>
For some reason the name <div>
does not get modified when the description and image divs do. Is there something I am missing here?
The JavaScript console in Safari and Chrome shows no errors and both have the same result. The name variable is also not null.
Also note this is just a school project, this doesn't have to be practical by any means.