Add and remove class when using pure Javascript getElementById

Asked

Viewed 168 times

1

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');
}
javascript

  • Dude, I don’t understand your question, you want to add an id to an element when it is clicked on it and then remove the previous class ?

  • This function compares if there are two identical ID’s on the page, if there is it will add the active class, but if I click another location I need you to remove the previous class and add it to the current one. I was able to explain?

  • You know that it is not correct to have two elements with equal ID, two ID with the same name always from the https://answall.com/questions/127330/qual-%C3%A9-a-purpose-of-properties-id-e-name-of-a-tag-html/

  • But in my case here it is necessary, because I am using one element to interact with another.

3 answers

2

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.

1

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>

  • I tried to use your example and I couldn’t, with the code I posted in the conversation you can make an example?

-1


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!

  • Wasn’t it simpler to use the solution that Sergio proposed? What’s the idea of you getting the event target, taking the value of the id and then search for the same element? In your code article and element will be exactly the same element, got very confused.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.