Add and remove class when using pure Javascript getElementById

Question

I created the function to add the active class in the ID that was clicked, but if I click another I want you to remove the previous class and add active in the one that was currently clicked.

With document.querySelectorAll I can, because it generates a Nodelist, so I make a forEach and it works, but with getElementById I’m not getting through.

function activeClass(event) {
  event.preventDefault();
  const element = event.target;
  const id = element.getAttribute('id');
  const article = document.getElementById(id);

  article.classList.add('ativo');
}

Answer 1

You cannot have more than one element with the same ID on a page.

You have to use classes and you can do it like this:

function activeClass(clicado) {
  const clicaveis = document.querySelectorAll('.clicavel');
  clicaveis.forEach(el => el.classList.toggle('ativo', el === clicado));
}

.clicavel {
  padding: 5px;
  background-color: light-grey;
  transition: background-color .15s;
}

.ativo {
  background-color: pink;
}

<a class="clicavel" onclick="activeClass(this)">Produto A</a>
<a class="clicavel" onclick="activeClass(this)">Produto B</a>

The idea is to have the elements that are part of that logic all with the same class, and then change the class depending on what is clicked.

Answer 2

You can use a global variable to store the id ativo, or save the element itself, and when set a new element ativo you remove the class from the variable element and arrow that variable with the new element..

let ativo;

function activeClass(event) {
  
  if (ativo !== undefined){
    ativo.classList.remove('ativo');  
  }
  ativo = event;
  
  event.classList.add('ativo');  
}

<div id="div-1" onclick="activeClass(this)">div 1</div>
<div id="div-2" onclick="activeClass(this)">div 2</div>
<div id="div-3" onclick="activeClass(this)">div 3</div>

Answer 3

After much cost I managed to solve the problem (in my own way).

Follows the code:

const selectMapID = document.querySelectorAll('.map a');
  const selectArticles = document.querySelectorAll('.map article');
  selectArticles[1].classList.add('ativo');

  selectMapID.forEach(item => {
    item.addEventListener('click', showState);
  })

  function showState(event) {
    event.preventDefault();
    const element = event.target;
    const id = element.getAttribute('id');
    const article = document.getElementById(id);

    selectArticles.forEach( (section) => {
      section.classList.remove('ativo');
    } );
    article.classList.add('ativo');
  }

Thank you all for your cooperation!