My game is not behaving properly. Built with JS, HTML & CSS

I made this game. Its basically a guessing game. Click a door and hope it does not have a robot behind it or you lose. One door will have the robot behind it, another will have the beach behind it and the last will have space behind it. You win when you the last door you open has the bot behind it. And every time you click play again, it randomizes which door will have the different entities behind it.
I have two problems:

  1. The instructions for the game have a certain design but the design is not catching. The number 1-4 are supposed to look the way their heading “Instructions” look.
  2. When i click on the door, instead of it showing me space, beach or robot, it becomes broken. It becomes that broken image symbol that you see on images that did not load properly. image
    Here is the game:
    https://codepen.io/Dee55/pen/KxpBLe

I meant they are supposed to be of the same font and color

You have a bug in this line: var choreDoor = Math.floor(Math.random() * numClosedDoors);
numClosedDoors is set to 3 but this code will always return either 0, 1 or 2. If the game initializes with choreDoor set to 0, you don’t set the corresponding filepaths. Hence the broken links.
Also the best strategy now is to always open door 3, the robot will never be behind it. When you won a game and start a new game where numClosedDoors is 0, the doors will stay the same as the last round because they will not be reset.

So your logic needs some rework, either start counting doors from 0 or use a random function that returns a number in range and is inclusive. Here is the MDN article in random functions with examples: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive