Mistah_Sheep Mistah_Sheep - 7 months ago 9
Javascript Question

Why is this div not responding to innerHTML when others on the page do?

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 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 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.

Answer

The name variable conflicts with window.name. You simply need to change var name = to var somethingElse =.

Comments