How to call function from external js file? – Blancer.com Tutorials and projects

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 undefined. How to reach a function for an external js file in html? Thanks in advance.
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();