<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="index.css">
<script src="index.js" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="main">
<img src="imgs/1.jpg" id="img" alt="">
</div>
<div class="imgs">
<img src="imgs/1.jpg" alt="">
<img src="imgs/2.jpg" alt="">
<img src="imgs/3.jpg" alt="">
<img src="imgs/4.jpg" alt="">
<img src="imgs/5.jpg" alt="">
<img src="imgs/6.jpg" alt="">
<img src="imgs/7.jpg" alt="">
<img src="imgs/2.png" alt="">
<img src="imgs/3.png" alt="">
</div>
</div>
</body>
</html>
var img = document.querySelector("#img");
img.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
this javascript file is linked correctly but not working apparently the error Uncaught TypeError: Cannot read property 'addEventListener' of null but it works fine when i paste the code in console
