addEventListener单击仅一次可用于类更改

Question

I may be approaching this completely wrong- it has to be done in vanilla JS.

I have DOM elements that I try to hide and show on clicks. I had this similar setup working for collapsible menu's and it worked fine. Not sure what I'm doing wrong here.

windows.onload = function() {
  features.addEventListener('click',function(){
      render(0); 
  })
  specs.addEventListener('click',function(){
      render(1); 
  })
  function render(which) {
    if (0) {
        console.log('0 clicked')
        features.classList.add('active');
        specs.classList.remove('active');
        renderFeatures.classList.remove('hidden');
        renderSpecs.classList.add('hidden');
    } else if (1) {
        console.log('1 clicked')
        features.classList.remove('active');
        specs.classList.add('active');
        renderFeatures.classList.add('hidden');
        renderSpecs.classList.remove('hidden');
    } 
}

I'm trying to add an active class and remove the hidden class on clicking both elements. It works when I click one, but then after that, it doesn't work anymore.

Answer 1

if (0) will always evaluate to false . You have to use the value of which variable that you're not doing anywhere.

function render(which) {
  if (which === 0) {
    console.log('0 clicked')
    features.classList.add('active');
    specs.classList.remove('active');
    renderFeatures.classList.remove('hidden');
    renderSpecs.classList.add('hidden');
  } else if (which === 1) {
    console.log('1 clicked')
    features.classList.remove('active');
    specs.classList.add('active');
    renderFeatures.classList.add('hidden');
    renderSpecs.classList.remove('hidden');
  } 
}

windows.onload = function() {
  features.addEventListener('click',function(){
      render(0); 
  })
  specs.addEventListener('click',function(){
      render(1); 
  })
}