Image change with javascript

Question

I'm newbie at javascript. I want to know what I'm doing wrong. I want to make image src swap on function onclick. After first click my image change to "close" but everytime more it seems to be closed. Just in case, I don't want other solution. I just want to know what is going wrong on my script. Thanks!

function menuOpenClose()
{
    var a = document.getElementById("mobile-menu-icon")

    if (a.src === "icon/menu.svg") {
        a.src = "icon/close.svg";
    } else {
        a.src = "icon/menu.svg";
    }
}

img {
        display: block;
        width: 32px;
        height: 32px;
    }

<div class="menu-icon" onclick="menuOpenClose();">
  <img id="mobile-menu-icon" src="icon/menu.svg">
</div>

In your if statement you are not comparing but assigning. Use a double or triple equal sign to compare the variable with the string. — fatrex
– fatrex, Commented Feb 7, 2019 at 19:59
I've removed the syntax mistake that's acting as a red herring here. New answers should address the issue with a.src. — isherwood
– isherwood, Commented Feb 7, 2019 at 20:07

gaetanoM · Accepted Answer · 2019-02-07 20:02:05Z

1

You can do it in two ways (indexOf() or getAttribute()):

if (a.src.indexOf("icon/menu.svg") != -1) {

or:

if (a.getAttribute('src') == "icon/menu.svg") {

The snippet:

function menuOpenClose()
{
    var a = document.getElementById("mobile-menu-icon")

    //if (a.getAttribute('src').indexOf("icon/menu.svg") != -1) {
    if (a.getAttribute('src') == "icon/menu.svg") {
        a.src = "icon/close.svg";
    } else {
        a.src = "icon/menu.svg";
    }
    console.log(a.src);
}

<div class="menu-icon" onclick="menuOpenClose();">
    <img id="mobile-menu-icon" src="icon/menu.svg">
</div>

answered Feb 7, 2019 at 20:02

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

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

Comments

Shane · Accepted Answer · 2019-02-07 19:55:53Z

1

Your condition in the if statement should be like below

   if (a.src === "icon/menu.svg") {

answered Feb 7, 2019 at 19:55

Shane

1934 silver badges10 bronze badges

Comments

AndrewL64 · Accepted Answer · 2019-02-07 20:01:41Z

0

You are using an assignment operator in your if statement instead of a comparison operator.

Change this:

if (a.src = "icon/menu.svg")

To this:

if (a.src === "icon/menu.svg")

Check and run the following Code Snippet for a practical example of the above approach:

/* CSS */
img {display: block;width: 32px;height: 32px;}

<!-- JavaScript -->
<script>
function menuOpenClose(){
    var a = document.getElementById("mobile-menu-icon")

    if (a.src === "https://picsum.photos/50/50?image=0") {
        a.src = "https://picsum.photos/50/50?image=1";
    } else {
        a.src = "https://picsum.photos/50/50?image=0";
    }
}
</script>

<!-- HTML -->
<div class="menu-icon" onclick="menuOpenClose();">
  <img id="mobile-menu-icon" src="https://picsum.photos/50/50?image=0">
</div>

edited Feb 7, 2019 at 20:01

answered Feb 7, 2019 at 19:54

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

2 Comments

ownidea Over a year ago

If I change it my image didn't change even in first click.

AndrewL64 Over a year ago

@ownidea Check the demo Code Snippet I added in the answer using your exact code but with the proper operator === used.

Vadim Hulevich · Accepted Answer · 2019-02-07 20:05:03Z

0

First of all change = to === it a different:

a.src === "icon/menu.svg" this correct

Second as you can see you never will change you image because your condition can't catch it.

this is anwer from console:

@>src https://stacksnippets.net/icon/menu.svg

you always do else

        function menuOpenClose() {
            var a = document.getElementById("mobile-menu-icon")

            console.log(`@>src`,a.src)

            if (a.src === "icon/menu.svg") {
                a.src = "icon/close.svg";
            } else {
                a.src = "icon/menu.svg";
            }
        }

<div class="menu-icon" onclick="menuOpenClose();">
    <img id="mobile-menu-icon" src="icon/menu.svg">
</div>

edited Feb 7, 2019 at 20:05

answered Feb 7, 2019 at 19:59

Vadim Hulevich

1,83311 silver badges17 bronze badges

Collectives™ on Stack Overflow

Image change with javascript

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related