Javascript if else with click dont-CodePudding

i need your help, i'm trying to programm a button that only works if you have 20.

here is my code:

const number = document.getElementById('number')
const button = document.getElementById('button')
const button_two = document.getElementById('button2')

let counter = 0;

button.addEventListener('click', function(){
    counter  
number.innerHTML = counter
})



if(number >= 20){
    button_two.addEventListener('click', function(){
        counter  
        counter  
        number.innerHTML = counter
    })
}else{}

CodePudding user response：

Attach one listener to a parent element (.buttons). Use event delegation to catch events from its child elements as they "bubble up" the DOM. If the child element that fired the event is a button work through the conditions.

// Cache the elements you'll be using
const number = document.querySelector('.number');
const buttons = document.querySelector('.buttons');
const plusTwo = document.querySelector('#plusTwo');

// Add one listener to the button container
buttons.addEventListener('click', handleClick);

let counter = 0;

function handleClick(e) {
  
  // If the child element that fired the event
  // is a button
  if (e.target.matches('button')) {
    
    // Destructure its id
    const { id } = e.target;
    
    // Add one, and if the counter is 20
    // enable the `plusTwo` button
    if (id === 'plusOne') {
        counter;
      if (counter === 20) plusTwo.disabled = false;
    }
    
    // Add two
    if (id === 'plusTwo') counter  = 2;

    // Minus one
    if (id === 'minusOne') --counter;
  
  }
  
  // Update the number
  number.textContent = counter;

}

<section >
  <button id="plusOne">Plus one</button>
  <button id="plusTwo" disabled>Plus two</button>
  <button id="minusOne">Minus one</button>
</section>
<div ></div>

Additional documentation