CODEWITHSUNDEEP
javascripthtml
Eymen
Eymen

Reputation: 175

removing class from element when the class goes to another one in javascript

first sorry if you don't understand the title

I have a list that contains elements once I click on an item, "s" class must be added to it and removed from others I try to remove by loop but didn't work

function selectIt(x) {
  x.classList.add('s');
  var items = document.querySelectorAll('item');
  for (i = 0; i < items.length; i++) {
    items[i].classList.remove('s');
  }
}
.s {
  background: red;
}
<div class="list">
  <div class="item" onclick="selectIt(this)">item 1</div>
  <div class="item s" onclick="selectIt(this)">item 2</div>
  <div class="item" onclick="selectIt(this)">item 3</div>
  <div class="item" onclick="selectIt(this)">item 4</div>
  <div class="item" onclick="selectIt(this)">item 5</div>
</div>

Upvotes: 0

Views: 130

Answers (3)

Yash Maheshwari
Yash Maheshwari

Reputation: 2412

You are not defining the type of selector in querySelectorAll like you want to search for a class or id. Add the s class at the end and not in the beginning, as defining it in the start will remove the s class from the current element also.

Also, you can search for s class in the querySelector instead of searching for item.

function selectIt(x) {
  var items = document.querySelectorAll('.s');
  for (i = 0; i < items.length; i++) {
    items[i].classList.remove('s');
  }
  x.classList.add('s');
}
.s {
  background: red;
}
<div class="list">
  <div class="item" onclick="selectIt(this)">item 1</div>
  <div class="item s" onclick="selectIt(this)">item 2</div>
  <div class="item" onclick="selectIt(this)">item 3</div>
  <div class="item" onclick="selectIt(this)">item 4</div>
  <div class="item" onclick="selectIt(this)">item 5</div>
</div>

Upvotes: 1

user15786743
user15786743

Reputation:

You can do this like this

function selectIt(x) {
            var elements = document.getElementsByClassName('item');
            for (var i = 0; i < elements.length; i++) {
                elements[i].style.backgroundColor = 'white';
            }
            x.style.backgroundColor = "red"
        }
<div class="list">
        <div class="item" onclick="selectIt(this)">item 1</div>
        <div class="item" onclick="selectIt(this)">item 2</div>
        <div class="item" onclick="selectIt(this)">item 3</div>
        <div class="item" onclick="selectIt(this)">item 4</div>
        <div class="item" onclick="selectIt(this)">item 5</div>
    </div>

Basically first i have made background color of class item = white then i have made background of "this" red

Upvotes: 0

zx01
zx01

Reputation: 571

You don't have to run a loop at all. First, remove the class s from the previous div element and add it to the new div element which is clicked.

function selectIt(x) {
  let item = document.querySelector('.s');
  item.classList.remove('s')
  x.classList.add('s');
}
.s {
  background: red;
}
<div class="list">
  <div class="item" onclick="selectIt(this)">item 1</div>
  <div class="item s" onclick="selectIt(this)">item 2</div>
  <div class="item" onclick="selectIt(this)">item 3</div>
  <div class="item" onclick="selectIt(this)">item 4</div>
  <div class="item" onclick="selectIt(this)">item 5</div>
</div>

Upvotes: 1

Related Questions