Hello everyone!
I have an issue on the first door. It doesn’t load the image when clicking, however the other two do load them.
<!DOCTYPE html>
<html>
<head>
<title>Chore Door!</title>
<link href="./style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet" type="text/css">
</head>
<body>
<div class = 'door-row'>
<img id="door1" class = 'door-frame' src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
<img id="door2" class = 'door-frame' src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
<img id="door3" class = 'door-frame' src="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/closed_door.svg">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
body {
background-color: #010165;
margin: 0px;
}
.door-frame{
cursor: pointer;
padding: 10px;
}
let doorImage1 = document.getElementById('door1');
let doorImage2 = document.getElementById('door2');
let doorImage3 = document.getElementById('door3');
let botDoorPath="https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg";
let beachDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/beach.svg';
let spaceDoorPath = 'https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/space.svg';
door1.onclick = () => {
doorImage1.src=botDoorpath;
};
door2.onclick = () => {
doorImage2.src=beachDoorPath;
}
door3.onclick = () => {
doorImage3.src=spaceDoorPath;
}
