my code is about to increment the counter in the browser when we click in the increment button-CodePudding

when we click on the increment button the counter shows in the browser not incrementing.

let countEl = document.getElementById("count-el");
console.log(countEl);
let count = 0;

function increment() {
  count = count   1;
  countEl.innertext = count;
}

<h1>people entered</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>

CodePudding user response：

function increment() {
let countEl = document.getElementById("count-el");
let count = countEl.innerHTML;
console.log(count);
  count  ;
   countEl.innerHTML = count;
}

<h1>people entered</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" onclick="increment()">INCREMENT</button>

CodePudding user response：

Javascript is case-sensitive. in your code you wrote

.innertext = ...

which should have been

.innerText = ...

Also, it is better to attach event click on the button rather on rely on onclick since you can't guarantee if the script file has already been loaded or not.

let countEl = document.getElementById("count-el");
console.log(countEl);
let count = 0;
let button = document.getElementById("increment-btn");

button.addEventListener('click', increment);

function increment() {
  
  count = count   1;
  countEl.innerText = count;
}

<h1>people entered</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn" >INCREMENT</button>