Question

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.

Answer 1

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