2

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}
1
  • 2
    change test/javascript to text/javascript and let us know what happens.
    – Joel Hager
    Commented Apr 25, 2020 at 22:15

2 Answers 2

4

First off: You have test/javascript instead of text/javascript under type. :)

EDIT for the answer:

changing ./script.js to script.js works for sibling files that are in the same folder.

using ../ goes up a level, and / uses root file path. Glad you're sorted!

4
  • Thanks for noticing! I changed it but still nothing is happening.
    – B_12
    Commented Apr 25, 2020 at 22:24
  • 1
    Where is the script located relative to the HTML file?
    – Joel Hager
    Commented Apr 25, 2020 at 22:29
  • It worked when I changed ./script.js to script.js. Thanks!
    – B_12
    Commented Apr 25, 2020 at 22:34
  • I was gonna say. It's relative, so if it's a sibling, you just specify the file. You can use ../ to go up a level, or just use / to specify root file path. Glad you got it sorte3d! Can you mark answered? So it'll help somebody in the future?
    – Joel Hager
    Commented Apr 25, 2020 at 22:35
1

It's a typo. <script type="test/javascript" src="./script.js"> should be <script type="text/javascript" src="./script.js">.

Here is your 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>
4
  • I've changed it to "text/javascript" but still no luck.
    – B_12
    Commented Apr 25, 2020 at 22:25
  • It still does not change the image when I clicked.
    – B_12
    Commented Apr 25, 2020 at 22:26
  • 2
    Try changing ./script.js to script.js and ./style.css to style.css Commented Apr 25, 2020 at 22:27
  • That was my second thought. I asked in my answer, but you got to it first haha
    – Joel Hager
    Commented Apr 25, 2020 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.