[FIXED] How to prevent a click event on a button from triggering by using another button in javascript?

Issue

I have a button with id "myButton" when clicked it should increase the count in span with id "clickCount" by 1 every time, the other button has an id "deactivate", when clicked it should no longer allow the increase in count even if the button with id "myButton" is clicked, I can manage upto the increase in count, but don't know how to stop the count from increasing without disabling the first button.

HTML

<button id="myButton">Click me!</button>
<p>You clicked on the button <span id="clickCount">0</span> times</p>
<button id="deactivate">Désactivate counting</button>

Javascript

let myButton = document.getElementById('myButton');
let newCount = document.getElementById('clickCount');
let deact = document.getElementById('deactivate');
let count = 0;
 myButton.addEventListener("click", function() {
 count++;
 newCount.innerText = count;
});

Solution

Remove the event listener from #myButton when the other button is clicked

let myButton = document.getElementById('myButton');
let newCount = document.getElementById('clickCount');
let deact = document.getElementById('deactivate');
let count = 0;
function handler() {
  count++;
  newCount.innerText = count;
}

myButton.addEventListener('click', handler);
deact.addEventListener('click', () => myButton.removeEventListener('click', handler));

<button id="myButton">Click me!</button>
<p>You clicked on the button <span id="clickCount">0</span> times</p>
<button id="deactivate">Désactivate counting</button>

Answered By - CertainPerformance

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)