I am trying to link the script.js file to html so that I can add some interactive attributes to the page. In the example below, the purpose was to change the door1 image when it's clicked on. It doesn't work for some reason, if anyone can give some feedback, that'd be very helpful!
Here is the HTML code:
<!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' 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>
Here is the script.js code:
var doorImage1 = document.getElementById('door1');
var botDoorPath = "https://s3.amazonaws.com/codecademy-content/projects/chore-door/images/robot.svg"
doorImage1.onclick = () => {doorImage1.src=botDoorPath}