Search code examples
javascriptjqueryhtmlimagesrc

jQuery update image srcs isn't working

I have an option to select a theme in an iOS web app.

<select onchange="if(this.value)window[this.value]();">
<option value="classic">Classic</option>
<option value="gradient">Gradient</option>
</select>

(The onchange option executes the js function specified in value as soon as the option is selected, without having to submit a form.)

The javascript/jQuery...

    function gradient() {
        alert('Applying theme gradient...');
        $('#coff').src="/Users/William/Desktop/sasapp/icons/gradient/profile.png";
            $('#topright').src="/Users/William/Desktop/sasapp/icons/gradient/settings.png";
        $('#login').src="/Users/William/Desktop/sasapp/icons/gradient/key.png";
    }

function classic() {
    alert('Applying theme classic...');
    $('#coff').src="/Users/William/Desktop/sasapp/icons/classic/profile.png";
    $('#topright').src="/Users/William/Desktop/sasapp/icons/classic/settings.png";
    $('#login').src="/Users/William/Desktop/sasapp/icons/classic/key.png";
}

Basically, the above script is supposed to change the srcs of images with the IDs #coff #topright and #login depending on the theme selected.

However, while the alert that the theme selected is being set is executed, the actual images stay the same and the srcs don't change.

Solution

  • use .attr()

    $('#coff').attr('src',"/Users/William/Desktop/sasapp/icons/gradient/profile.png");