unable to change image source in DOM javascript

Question

I’m Rahul and I’m new to coding. I have a query related to DOM event. Please look at the following code snippet -

let door1 = document.getElementById('one');
door1.src = "closed_door.svg";
const isClicked = (door) => {
    if(door.src === "closed_door.svg") {
        return true;
    }
    else {
        return false;
    }
};
door1.onclick = () => {
    if(isClicked(door1)) {
    door1.src = "beach.svg";}
};

To give you brief, one is an id for an element. Without isClicked, I am able to successfully change the src from closed door to beach on clicking. But when I introduce isClick, it doesn’t change. Can someone please tell me what I’m missing. I’ll be very thankful

Note - I'm building game similar to this - https://s3.amazonaws.com/codecademy-content/projects/chore-door/chore-door-final/index.html They are using the same process as mine. So please suggest a solution that tells me about the error I'm making here rather than an alternative to the problem

Regards Rahul

console.log(door.src) in the isClicked method and see what it says it is — Taplar
– Taplar, Commented Jul 2, 2020 at 16:27
It's better to use setAttribute and getAttribute when modifying attributes that appear directly in the html. Change door1.src = 'closed_door.svg'; into door1.setAttribute('src', 'closed_door.svg');. Change if (door.src === 'closed_door.svg') into if (door.getAttribute('src') === 'closed_door.svg') — Gershom Maes
– Gershom Maes, Commented Jul 2, 2020 at 16:28
My assumption is the logic needs to be changed to door.src.endsWith('closed_door.svg') — Taplar
– Taplar, Commented Jul 2, 2020 at 16:31
The src on the door Element is the property of the element, not the attribute. The property most likely has the full file path. The attribute may be 'me.svg', but the property will probably be 'yoursite.com/me.svg`. This is why I said to log the value and see for yourself — Taplar
– Taplar, Commented Jul 2, 2020 at 16:33

Alberto · Accepted Answer · 2020-07-02 16:34:18Z

1

As reported here:

the src reflected property will be the resolved URL — that is, the absolute URL that that turns into. So if that were on the page http://www.example.com, document.getElementById("foo").src would give you "http://www.example.com/images/example.png".

so to get the real src attribute you should use .getAttribute('src') like so:

const isClicked = (door) => {
    if(door.getAttribute('src') === "closed_door.svg") {
        return true;
    }
    else {
        return false;
    }
};

Ans also BTW, you can just shortcut it to:

const isClicked = (door) => door.getAttribute('src') === "closed_door.svg";

answered Jul 2, 2020 at 16:34

Alberto

13.1k3 gold badges31 silver badges72 bronze badges

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

4 Comments

Rahul Over a year ago

Thank you Berto. Just a query - s3.amazonaws.com/codecademy-content/projects/chore-door/… They use the similar logic as mine. Can you tell me the mistake why I cannot get similar results with the logic I gave in the snippet?

Alberto Over a year ago

@Rahul because they have let closedDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg" and not let closedDoorPath = "closed_door.svg"

Rahul Over a year ago

Thank you so much @Berto99. This was my first question on Stack Overflow and you made a very pleasant experience for me! Means a lot for a learner like me who is currently on zero level! Please be a savior in the future as well! :D

Alberto Over a year ago

@Rahul ahah sure no problem, we all passed by that moment, good luck

Rohit Tagadiya · Accepted Answer · 2020-07-02 17:59:19Z

0

Replace your code with this..

let door1 = document.getElementById('one');
door1.src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg";
const isClicked = (door1) => {
    if(door1.src === "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg") {
        return true;
    }
    else {
        return false;
    }
};

door1.onclick = () => {
    if(isClicked(door1)) {
    door1.src = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg";}
};

edited Jul 2, 2020 at 17:59

answered Jul 2, 2020 at 17:16

Rohit Tagadiya

3,7661 gold badge28 silver badges33 bronze badges

2 Comments

Rahul Over a year ago

Incorrect solution. Please check the answer by berto99

Rohit Tagadiya Over a year ago

Okay .. .. @Rahul

Collectives™ on Stack Overflow

unable to change image source in DOM javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related