I faced this problem when i doing my project and not able to use addEventListener function. So I make new file and try to catch the error, so basically its store null value to the variable that's why i am not able to use. When i use the same code on the console , that was executed and give the expected result but not with VS code.
*JS code
let elem7=document.getElementById("mainDiv")
console.log(elem7)//prints null
elem7.addEventListener('click',function(e){
console.log("You Clicked")
})
HTML CODE:
<body>
<h3>Editable div</h3>
<div id="mainDiv">
</div>
</body>
Just add your id tag to your <h3> element.
Your <div> is empty, and because of that, it is not clickable.
let elem7=document.getElementById("mainDiv")
console.log(elem7)//prints the whole HTML element
elem7.addEventListener('click',function(e){
console.log("You Clicked")
}) <body>
<h3 id="mainDiv">Editable div</h3>
<div>
</div>
</body>Try this and see console, it might works!
let elem7=document.getElementById("mainDiv")
console.log(elem7)//prints null
elem7.addEventListener('click',function(e){
console.log("You Clicked")
}) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h3>Editable div</h3>
<div id="mainDiv">
Click me
</div>
</body>
</html>