Javascript IF statement with DOM

Question

I'm having trouble with an IF statement that checks a DOM element and replaces the current src with a new src. In the code below, I know the source for sceneImageID is the image after the ==, yet the IF statement does not trigger.

var scene = document.getElementById('sceneImageID').src;
        console.log("scene before if: " + scene);
        if (scene.endsWith == "Media/Town/Town_bw.png") {
            scene = "Media/Town/Town_bw_noscrap.png";
            console.log("inside if statement: " + document.getElementById("sceneImageID").src);
        }

EDITS: added the .endsWith piece, but I'm having the same issue of it not entering the IF statement.

The first console returns: http://34.68.254.120:8080/Media/Town/Town_bw.png

Thanks in advance.

Are you sure that is what it is? debug it: console.log(document.getElementById('sceneImageID').src); — epascarello
– epascarello, Commented Dec 23, 2022 at 20:21
You didn't give any context, but... Do what epascarello said to see if it outputs "Media/Town/Town_bw.png". Make sure you referenced the id correctly (which above check also confirms). Perhaps you are trying to access the image before it has finished loading? — Emre Bener
– Emre Bener, Commented Dec 23, 2022 at 20:27
Yes, sorry, I do have a console log and it returns the following. Have edited the question: 34.68.254.120:8080/Media/Town/Town_bw.png — SleepyWakes
– SleepyWakes, Commented Dec 23, 2022 at 20:40
Because the src adds the protocol and domain of the page. So it will never match. — epascarello
– epascarello, Commented Dec 23, 2022 at 20:43

Unmitigated · Accepted Answer · 2022-12-23 20:38:52Z

2

Relative sources will get expanded to a full URL, so consider checking for ending with instead.

if (document.getElementById('sceneImageID').src.endsWith("Media/Town/Town_bw.png")) {

answered Dec 23, 2022 at 20:38

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

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

2 Comments

SleepyWakes Over a year ago

Thanks, this seemed like the exact solution, but I don't have it working. See the edits to the question.

Unmitigated Over a year ago

@SleepyWakes You wrote it wrong. Look at the code in my answer. endsWith is a function, so you call it as .endsWith("Media/Town/Town_bw.png"). You could've directly copied it from my answer.

Methark · Accepted Answer · 2022-12-23 20:43:14Z

0

Just to make sure that you are setting the image ID:

<img id="ImgTown" src="Media/Town/Town_bw.png">

<script>
var checkImage = document.getElementById("ImgTown");
if (checkImage.src == "Media/Town/Town_bw.png") 
{
    checkImage.setAttribute("src", "Media/Town/Town_bw_noscrap.png");
}
</script>

This script will just be triggered if you load the page with the Media/Town/Town_bw.png as the image source. Else, you must have an event like "onClick" calling this using a function.

edited Dec 23, 2022 at 20:43

answered Dec 23, 2022 at 20:41

Methark

1108 bronze badges

1 Comment

SleepyWakes Over a year ago

You're absolutely right, after I fixed the main IF problem I realized I wasn't actually setting the new element src. Thanks for the heads up.

Collectives™ on Stack Overflow

Javascript IF statement with DOM

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related