I'm trying to build a beginner app that will increment and decrement a given number on a mouse event. However, the buttons act weird. Each button increments and decrement but only after the second click. After the first they do the opposite, ie. the increment button = decrements and vice versa. Can anyone tell why it happening? (The buttons work weird after the first click then work just fine)
let batch = document.getElementById("count-el");
let batchConverted = Number(batch.innerText);
const incrementBtn = document.getElementById("increment-btn");
const decrementBtn = document.getElementById("decrement-btn");
incrementBtn.addEventListener("click", increment);
decrementBtn.addEventListener("click", decrement);
function increment() {
let batchIncrement = batchConverted++;
batch.innerText = batchIncrement;
}
function decrement() {
let batchDecrement = batchConverted--;
batch.innerText = batchDecrement;
}<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
<button id="decrement-btn">Decrement</button>