CODEWITHSUNDEEP
javascriptinnerhtml
FoxyFish
FoxyFish

Reputation: 892

Javascripts innerHTML not working for images, but works with text?

Ok, i have a javascript function which toggles the innerhtml of a div tag when a user changes the option of a select dropdown box..

It all works fine with text, but with an image tag it stops working?

Working Example...

function toggle(opt) {
        var d = document.getElementById('div_tag');
        if (opt == '5') {
                d.innerHTML = 'FIVE';
        }
        else if (opt == '4') {
                d.innerHTML = 'FOUR';
        }
        etc...
}

Not Working Example...

function toggle(opt) {
        var d = document.getElementById('div_tag');
        if (opt == '5') {
                d.innerHTML = '<img src='path/img1.jpg'><img src='path/img2.jpg'>';
        }
        else if (opt == '4') {
                d.innerHTML = '<img src='path/img2.jpg'><img src='path/img1.jpg'>';
        }
        etc...
}

This is what i have on my select and div tags.

<select onchange='toggle(this.value);'>
<div id='div_tag'></div>

Anyone tell me what i'm doing wrong here cos i am stumped.. why would one work and not the other when all that is different is one been the other being text??

Thanks.

Upvotes: 4

Views: 40035

Answers (2)

Ashwin Singh
Ashwin Singh

Reputation: 7355

Do these changes, replace ' with " at the beginning and end.

function toggle(opt) {
        var d = document.getElementById('div_tag');
        if (opt == '5') {
                d.innerHTML = "<img src='path/img1.jpg'><img src='path/img2.jpg'>";
        }
        else if (opt == '4') {
                d.innerHTML = "<img src='path/img2.jpg'><img src='path/img1.jpg'>";
        }
        etc...
}

You were actually using single quote instead of double quotes. path/img1.jpg, path/img2.jpg wasn't being treated part of your string earlier. That was the problem.

UPDATE For you php problem do this:

function toggle(opt) {
        var d = document.getElementById('div_tag');
        if (opt == '5') {
                d.innerHTML = '<img src='+'path/img1.jpg'+'><img src='+'path/img2.jpg'+'>';
        }
        else if (opt == '4') {
                d.innerHTML = '<img src='+'path/img2.jpg'+'><img src='+'path/img1.jpg'+'>';
        }
        etc...
}

Upvotes: 1

Ryan Flood
Ryan Flood

Reputation: 198

It seems to me like you forgot to escape the quotes surrounding your image paths, and its not reading your string correctly, try this

function toggle(opt) {
    var d = document.getElementById('div_tag');
    if (opt == '5') {
            d.innerHTML = '<img src=\'path/img1.jpg\'><img src=\'path/img2.jpg\'>';
    }
etc...

Upvotes: 8

Related Questions