Can't assign html .src to a javascript variable

Question

I'm trying to switch an image on a HTMLbutton using javascript.

It works, but I think it loads the image every time I click the button, and that's not good. So I want to load the images only one time and than I can switch between the images. This Is what I have now.

mute.onclick=function () {

if (audioEngine.isMuted)
    {
    document.getElementById('muteIcon').src="images/unmuted.png";
    }       
         else{
           document.getElementById('muteIcon').src="images/unmuted.png";
             }

But I think every time I click the button it looks in the path "images/unmuted.png" to see what's there and load it. So I was thinking this is an easy fix. I just define a variable unmuteImage and assign that to document.getElementById('muteIcon').src. Like this

var unmuteImage=new Image();
    unmuteImage.src='images/unmuted.png';

mute.onclick=function () {

if (audioEngine.isMuted)
    {
    document.getElementById('muteIcon').src=unmuteImage;
    }       
         else{
           document.getElementById('muteIcon').src="images/unmuted.png";
             }

But when I do this, I get the following error in my consols:

GET file:///path/to/the/mian/html/file/[object%20HTMLImageElement]  (In red text)

And I don't get the image, I get the "borken image" picture because somehow it didn't find the picture.

Can somebody help me please? Thanks

Put two <img> tags beside eachother, and use the CSS display property to only display the correct image, e.g., when isMuted === true, show one of the img tags, and vice versa. — Joe Simmons
– Joe Simmons, Commented Nov 16, 2013 at 11:33
It shouldn't need to load the images each time, they should be cached and it will reuse the cache. — Barmar
– Barmar, Commented Nov 16, 2013 at 12:17

SHIN · Accepted Answer · 2013-11-16 11:48:59Z

1

this may work for you if you have jquery

$('#muteIcon').replaceWith(unmuteImage);

other wise you have to use src itself

document.getElementById('muteIcon').src = unmuteImage.src;

answered Nov 16, 2013 at 11:48

SHIN

3861 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bosiwow Over a year ago

Thank you, the src works! :D but the replaceWith works only one time. it's strange. It stays on muted icon and doesn't go back to unmuted icon. No error. Strange...

Collectives™ on Stack Overflow

Can't assign html .src to a javascript variable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related