I am trying to increment a button on click from an external js file. When i click on the button i am having an error message telling me that my function increment is not defined. How to reach a function for an external js file in html? Thanks in advance. sandbox index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>webpack starterkit</title>
</head>
<body>
<div id="app">
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
</div>
<button id="increment-btn" onclick="increment()">Increment</button>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>
index.js
let count = 0;
let countEl = document.getElementById("count-el");
console.log(countEl);
document.getElementById("count-el").innerText = count;
function increment() {
count = count + 1;
countEl.innerText = count;
}
increment();