- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Adding content to DIV not working
For some reason I am getting this annoying issue, which has been annoying me all morning. I have the following HTML code:
<div id="exploration">
<ul id="menu-bar"><li><a id="mall-ground" href="#">Ground Floor</a></li><li><a id="mall-first" href="#">First Floor</a></li></ul>
<div id="floor-info"></div>
</div>
followed by this JavaScript:
$(document).ready(function() {
$('#mall-ground').click(function(e) {
e.preventDefault();
$('#floor-info').html("<img src=\"mall_ground.png\" style=\"margin:5px auto;\">");
});
});
So you should be able to identify what I am trying to do. When the a link is clicked, the div id #floor-info should populate with the HTML added via the JS query, but it doesn’t. Any clues as to how to make this function?
I think it’s just a matter of correct quotes and src path being correct.
$(document).ready(function () {
$('#mall-ground').click(function (e) {
e.preventDefault();
$('#floor-info').html('<img src="http://lorempixel.com/output/city-q-c-640-480-1.jpg" />');
});
});
Seems to work – http://jsfiddle.net/Paulie_D/HCwcN/6/
I don’t think the quotes matter that much though. The original code worked fine, it just needed a proper image: http://codepen.io/senff/pen/zmLaK
Weird that it’s working for you. The image is in the same folder as the HTML file, so surely the original code should work, right?
If the image is in the same folder you probably don’t need the ‘slashes’
The backslashes were used to cancel out the speech marks from closing off the string. However, I got it working now. I needed to use non-delegated events because of the way in which Twine, the environment I am using, works.