Adding content to DIV not working

[brutalexcess]

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?

[Paulie_D]

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/

[Senff]

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

[brutalexcess]

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?

[Paulie_D]

If the image is in the same folder you probably don’t need the ‘slashes’

[brutalexcess]

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.

[Author]

Posts