why i am not able to change the source of image using DOM?

Question

<img id ="image" src="E:\freecodecampprojects\Reviews\fblack.jpg" alt="">

const reviews = [
    {
        id:1,
        photo : "E:\freecodecampprojects\Reviews\fblack.jpg",
        fullname: "Sara John",
        job: "UX DESIGNER",
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    },
    {
        id:2,
        photo : "E:\freecodecampprojects\Reviews\fkorean.jpg",
        fullname: "Murakami",
        job: "GRAPHIC DESIGNER",
        text: "As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible. For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you.",
    },
];

const profileImage = document.getElementById("image");

let currentItem = 1;

window.addEventListener("DOMContentLoaded",function(){
    const item = reviews[currentItem];
    profileImage.src = item.photo;
});

Q. Inside function, all is working except profileImage.

In above profileImage.src = item.photo; should change the profile photo.

Have you checked the developer tools console for error messages? Does it say that `profileImage` is null? — Quentin, Apr 12 '23 at 14:53
Have you logged `item.photo` to make sure the value it has is the value you expect? (Hint: ```\``` has special meaning in URLs … and you should use URLs not Windows file system paths in attributes that expect URLs). — Quentin, Apr 12 '23 at 14:54
Do yourself a favor and run a local server and not off the file protocol. — epascarello, Apr 12 '23 at 14:55
Bah. My previous comment should have said "```\``` has special meaning in string literals". My fingers were getting ahead of me there. — Quentin, Apr 12 '23 at 15:48

Chris Barr · Answer 1 · 2023-04-12T15:53:21.343

You are tying to select the image before the DOMContentLoaded event has run. Just move it inside of that function. I added some logging so you can see that is has changed when you run the code.

Also, do note that you are using \ which are characters that need to be escaped, so it's not going to work correctly. However this is because you are referencing files on your local hard disk, so it would be better to reference files online or on a local dev server instead.

const reviews = [
    {
        id:1,
        photo : "E:\freecodecampprojects\Reviews\fblack.jpg",
        fullname: "Sara John",
        job: "UX DESIGNER",
        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    },
    {
        id:2,
        photo : "E:\freecodecampprojects\Reviews\fkorean.jpg",
        fullname: "Murakami",
        job: "GRAPHIC DESIGNER",
        text: "As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible. For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you.",
    },
];

let currentItem = 1;

window.addEventListener("DOMContentLoaded",function(){
  const profileImage = document.getElementById("image");
  
  console.log('before', profileImage.src)
  
  const item = reviews[currentItem];
  profileImage.src = item.photo;
  
  console.log('after', profileImage.src)
});

<img id ="image" src="E:\freecodecampprojects\Reviews\fblack.jpg" alt="">

"You are tying to select the image before the DOMContentLoaded event has run" — But not necessarily before the image exists in the DOM. If this was the problem then there is a [perfectly fine duplicate](https://stackoverflow.com/questions/8739605/getelementbyid-returns-null). — Quentin, Apr 12 '23 at 15:52
Meanwhile the logging you've added shows `after e:%0CreecodecampprojectsReviews%0Ckorean.jpg` which is almost certainly not what is desired (but there's [another perfectly good duplicate for that too](https://stackoverflow.com/questions/3903488/javascript-backslash-in-variables-is-causing-an-error). — Quentin, Apr 12 '23 at 15:52
True, but that's not an issue with the logging, that's due to OP's usage of \ characters. A different image path will fix that. — Chris Barr, Apr 12 '23 at 15:54
No, it's not a problem with the logging, the logging just highlighted the problem I'd mentioned in my comment when the question was first posted and which you'd missed in the pre-edited version of your answer. — Quentin, Apr 12 '23 at 15:55

why i am not able to change the source of image using DOM?

1 Answers1