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}
2 answers
solution1
4 2020-04-25 22:15:09
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!
solution2
1 ACCPTED 2020-04-25 22:19:59
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.