Increment Button at Javascript using html and css. I am bit confused-CodePudding

Neither in the IDE when I preview does the button click nor in the various browsers I used. (Mozilla, Chrome)

I want the button to click but I can not do it although the IDE does not get an error. Take the following piece of code:

function increment() {
  console.log("The button was clicked")
}
increment()

html,
body {
  margin: 0;
  padding: 0;
}

button {
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  color: white;
  font-weight: bold;
  width: 200px;
  margin-bottom: 5px;
  border-radius: 5px;
}

#increment-btn {
  background: darkred
}

<!DOCTYPE html>
<html lang="el">

<head>
  <title>Page Count</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <h1>People enter:</h1>
  <h2 id="count">100</h2>
  <button id="increment-btn" onclick="increment()">INCREMENT</button>

  <script src="index.js"></script>
</body>

</html>

CodePudding user response：

in your Javascript file don't call the function again. as you are already calling it on button,

i mean on button you have added " onclick " handler it should work just fine. just remove last line in Javascript file