Sorry if it's a newbie question , i just started coding html,css and javascript and encountered this error-
ReferenceError: document is not defined** -> this issue is only in vscode , when i run this same line on google console it works , now my question is i called the function increase , when i click INCREMENT on website then it should go like 0,1,2,3
```
count = 0;
let constEl = document.getElementById("coun");
function increase() {
count += 1;
console.log("CLICKED!");
constEl.textContent = count;
console.log(constEl);
}
```~~~<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>People Counter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>People entered:</h1>
<h2 id="coun">0</h2>
<button id="add_btn" onclick="increase">INCREMENT</button>
<button id="save_btn">Save</button>
<script src="counter.js"></script>
</body>
</html>~~~body {
margin: 0;
border: 0;
background-image: url("station.jpg");
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: bolder;
background-size: cover;
text-align: center;
}
h1 {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
font-size: 3rem;
}
#counter_el {
text-align: center;
text-transform: capitalize;
font-size: 4rem;
margin: 0;
border: 0ch;
}
button {
size: 2px;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
#add_btn:hover {
background-color: limegreen;
color: white;
}
#add_btn {
border: 2px solid limegreen;
color: black;
transition-duration: 0.4s;
border-radius: 2px;
}
#save_btn {
border: 2px solid red;
transition-duration: 0.4s;
border-radius: 2px;
}
#save_btn:hover {
background-color: red;
color: white;
}```