<!DOCTYPE html>
<html>
<head>
<title>Post Lecture Task</title>
</head>
<body>
<h1 id="demo" onmouseover="mouseOver">Mouse over me</h1>
<script src="Documents/postlecture.js"></script>
</body>
</html>
The JS works if I include it internally but I am confused as to why it won't work when connected as an external js file.
function mouseOver() {
document.getElementById("demo").style.color = "red";
}
js src it will depend on where your file located . also, in this example .i think you should replece
onmouseover="mouseOver"
with onmouseover="mouseOver()"
If your index.html file is at same location as the postlecture.js file, then you can do like following,
<!DOCTYPE html>
<html>
<head>
<title>Post Lecture Task</title>
</head>
<body>
<h1 id="demo" onmouseover="mouseOver()">Mouse over me</h1>
<script type="text/javascript" src="postlecture.js"></script>
</body>
</html>
<!--postlecture.js file -->
function mouseOver() {
document.getElementById("demo").style.color = "red";
}