If else loop not working how I want it to

Question

I'm pretty new to javascript and my problem is that when I try to create a button with 2 functions using an if else loop, it doesn't work for me, I have tried other people's code which to me looks the exact same and theirs works. I haven't been able to find anything about what I might be doing wrong.

The button works the first time, changing the image to the second one, but isn't able to revert it to the original when I click it again.

<head>
<script>
var btn, photo;
function initButton(){
    btn=document.getElementById("btn");
    photo = document.getElementById("photo");
    btn.addEventListener("click", change);
    function change(){
        if(photo.src = "images/play.png"){
            photo.src = "images/pause.png"
        } else {
            photo.src = "images/play.png"
        }
    }
     }
window.addEventListener("load", initButton);
</script>
</head>
<body>
    <button id="btn">photo</button>
    <img src="images/play.png" height="300px" id="photo"/>
</body>

`=` sets/assigns a value. `==`/`===` checks the existing value. Note which of the two you're using in the condition of the `if`. Also, a minor note, but `if` statements are not a type of loop. They do not repeat code. — Carcigenicate, Jun 18 '23 at 19:16
`if` is not a looping construct, it is for making decisions. — Pointy, Jun 18 '23 at 19:20

score 0 · Answer 1 · answered Jun 18 '23 at 19:30

First of all, keep in mind that conditional statement need double equal symbols to make a comparison (else it is an affectation).

It is also a good practice to externalise the function declaration, so that wed have the 2 at the same level.

You should also only compare the current file name (or antoher possibility is to use a boolean var), that I have done by spliting the path by the / symbol.

<head>
<script>
var btn, photo;
function change(){
    var parts = photo.src.split("/");
    var result = parts[parts.length - 1]; // get the filename only
    //console.log(result);
    if(result == "play.png"){
        console.log("change to pause");
        photo.src = "images/pause.png";
    } else {
        console.log("change to play");
        photo.src = "images/play.png";
    }
}
    
function initButton(){
    btn = document.getElementById("btn");
    photo = document.getElementById("photo");
    btn.addEventListener("click", change);
}
window.addEventListener("load", initButton);
</script>
</head>
<body>
    <button id="btn">photo</button>
    <img src="images/play.png" height="300px" id="photo"/>
</body>

subdeveloper · Answer 2 · 2023-06-19T04:54:06.790

Two things:

if or else is not called a loop statement. Its called a conditional or branch or decision statement.

Replace = with == inside if condition to make it work. i.e.:

 function change(){
     if(photo.src == "images/play.png"){
         photo.src = "images/pause.png";
     } 
     else {
         photo.src = "images/play.png";
     }
 }

Explanation:

= is for assignment i.e. in simple terms it takes value from it's right side and assigns to left side, and returns/evaluates to that value (that is why in your existing code 1st if statement will always be executed, as its condition will always be true)

where as == is for equality check, i.e. if both values on right and left side of this operator are same, it returns/evaluates to true, otherwise false.

If else loop not working how I want it to

2 Answers2