ChoreDoor Change the Images used


I am trying to re-style the game that i built as part of a JavaScript project.
I have hit a stumbling block when it comes to trying to change the images used, currently the project links outward to and external site for image, but id like to use new image on my local PC.
I think the key issue is when trying to link a variable in the .js file to a local image (but i could be wrong).

this is the orig HTML

    <div class="door-row"> 
      <img id="door1" class = "door-frame" src="" alt="door1">;
      <img id="door2" class = "door-frame" src="" alt="door2">;
      <img id="door3" class = "door-frame" src="" alt="door3">;

and now my new HTML

<div class="door-row"> 
      <img id="door1" class = "door-frame" src="./Resources/localShop.jpg" alt="door1">;
      <img id="door2" class = "door-frame" src="./Resources/localShop.jpg" alt="door2">;
      <img id="door3" class = "door-frame" src="./Resources/localShop.jpg" alt="door3">;

this is the original JS

let doorImage1 = document.getElementById("door1");
let doorImage2 = document.getElementById("door2");
let doorImage3 = document.getElementById("door3");
let startButton = document.getElementById("start")
let botDoorPath = "";
let beachDoorPath = "";
let spaceDoorPath = "";
const closeDoorPath = "";

I have attempted to change the closeDoorPath to document.getElementById("door1"); and i have also tried to enter the relative path.

neither options work, any ideas please

thank you

Hi there.

If the closed door image is no longer loading, it could be because the path is wrong.

At the moment, the path you’re using is looking for a directory Resources at the same level as your index.html file and searching in there for the localShop.jpg.

If the “Resources” directory is not at the same level as index.html, then the path would be wrong. :slight_smile:

Hi, thanks for replying but the location of images is correct; i have investigated further :

  1. Changing the bot/beach/space to relative paths works fine…

  2. I have linked closedDoorPath to a random external image, in this instance the image fails to load but when i click on the ‘not loaded icons’ the game still functions.

  3. attempt to link to file using full path C:/ etc, still fails.

The problem appears to be located to the closeddoorVarible

i continue to investigate

Possibly clutching at straws, but you’re using closeDoorPath consistently throughout the code right?

If you’ve got access to GitHub, or some other way to upload all the components of the project (HTML, CSS, JS and images), could you upload the code so we can see what you’re doing? (Feel free to replace any personal info, like if there’s a name in paths or whatever.)

sure i have github the repository has been uploaded and found at this address:

I have commented the code blocks i want adjusted within the html and js file.

many thanks

Thanks for that.

I’ve spent a little bit of time having a look at the code.

If I change your index.html to use the relative paths for the closed doors at the start, everything continues to work fine.

The issues begin when I try and do the same in the JS.

If I define one of the paths as let botDoorPath = "Resources/robot.svg";, the doors continue to open but other functionality breaks.

To illustrate this, here’s some output from the console which I’ve added to the isBot() function:

door.src:, botDoorPath: ./Resources/robot.svg

As you can see, I’m running a lightweight web server locally to run your Chore Bot code. The src attribute of the door object I’ve clicked has a full path in it, but the value we’re comparing to is the shortened relative path. These will never be equal, so we no longer lose the game if we find the Chore Bot before opening all the doors.

A similar breakage happens if I switch to using const closeDoorPath = "./Resources/closed_door.svg"; . At this point, the doors don’t open when clicked… for the same reason that checking if we’ve found the robot doesn’t work like this.

The way I have had to work around this in your JS is by doing this:

let doorImage1 = document.getElementById("door1");
let doorImage2 = document.getElementById("door2");
let doorImage3 = document.getElementById("door3");
let startButton = document.getElementById("start");

// I've added the "root" of the URI to a constant here...
const imageRoot = ""

// ...and then used it here to make an absolute path.
let botDoorPath = imageRoot + "Resources/robot.svg";
let beachDoorPath = imageRoot + "Resources/beach.svg";
let spaceDoorPath = imageRoot + "Resources/space.svg";
const closeDoorPath = imageRoot + "Resources/closed_door.svg";

I don’t know whether there’s another solution, but from JavaScript’s perspective the URIs to the images are just strings - it’s not expanding out and inferring the additional “root” which the browser’s HTML engine is doing.

I’m not amazing with JS, though; someone else here may have a better answer for you, but in the meantime the change above will work. You’ll need to adjust the imageRoot variable, though. :slight_smile:

thanks for taking the time to check it out, i will give your solution a go an see if can get it work.

many thanks :+1: :+1: :+1: