Linking script.js to html

Question

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}

change test/javascript to text/javascript and let us know what happens. — Joel Hager
– Joel Hager, Commented Apr 25, 2020 at 22:15

Joel Hager · Accepted Answer · 2020-04-25 22:36:47Z

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!

edited Apr 25, 2020 at 22:36

answered Apr 25, 2020 at 22:15

Joel Hager

3,4683 gold badges26 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

B_12 Over a year ago

Thanks for noticing! I changed it but still nothing is happening.

Joel Hager Over a year ago

Where is the script located relative to the HTML file?

B_12 Over a year ago

It worked when I changed ./script.js to script.js. Thanks!

Joel Hager Over a year ago

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?

MARSHMALLOW · Accepted Answer · 2020-04-25 22:19:59Z

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>

answered Apr 25, 2020 at 22:19

MARSHMALLOW

1,4052 gold badges14 silver badges25 bronze badges

4 Comments

B_12 Over a year ago

I've changed it to "text/javascript" but still no luck.

B_12 Over a year ago

It still does not change the image when I clicked.

MARSHMALLOW Over a year ago

Try changing ./script.js to script.js and ./style.css to style.css

Joel Hager Over a year ago

That was my second thought. I asked in my answer, but you got to it first haha

Collectives™ on Stack Overflow

Linking script.js to html

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related