Adding a CSS property to an HTML

Question

I'm trying to listen for a click event on a node list to add a CSS property, I don't want two nodes to have the property and I also want to toggle the CSS property on any of the node list with a second click, I can't seem to get the right guard clause to use, any Help.

enter code here

const action = document.querySelectorAll ('.item');

const clearColor = function() {
  action.forEach(function(item) {
    item.classList.remove('item-color');
  })
}

action.forEach(function(item) {
  item.addEventListener("click", function(e) {
    const target = e.target; 
    clearColor();
    target.classList.toggle("item-color")
  })
})

.hidden {
  display: none;
}

.item {
  margin: 10px;
}

.item-color {
  background-color: red;
}

<div class="action">
  <div class="item">pizza</div>
  <div class="item">rice</div>
  <div class="item">spaghetti</div>
  <div class="item">honey</div>
  <div class="item">cheese</div>
</div>

**strong text**

You call remove then toggle which will leave it on

Daniel A. White
– Daniel A. White

2022-08-02 12:13:31 +00:00
Commented Aug 2, 2022 at 12:13 — Daniel A. White
– Daniel A. White, Commented Aug 2, 2022 at 12:13

RickN · Accepted Answer · 2022-08-02 12:18:23Z

2

You're almost there. There is a small problem here:

The user clicks on an item.
All items get their CSS class removed.
The clicked item gets a CSS class added if it doesn't already exist.

The subtle thing here is that "if it doesn't already exists" is always true for the clicked item, because you just removed its CSS class in step 2.

The solution is to not remove the class in step 2:

const clearColor = function(except) {
  action.forEach(function(item) {
    if (item === except) {
      return;
    }
    item.classList.remove('item-color');
  })
}

// ...

clearColor(target);

By filtering out the clicked element from the items you're removing the CSS classes from, .toggle() will work as expected.

answered Aug 2, 2022 at 12:18

RickN

13.6k4 gold badges28 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdullah Qasemi · Accepted Answer · 2022-08-02 12:21:32Z

This is the solution I came up with. Not the best but gets the job done.

const action = document.querySelectorAll ('.item');

const clearColor = function() {
  action.forEach(function(item) {
    item.classList.remove('item-color');
  })
}

action.forEach(function(item) {
  item.addEventListener("click", function(e) {
    const target = e.target; 
    if(target.classList.contains("item-color")){
        clearColor();
    }else{
        clearColor();
        target.classList.toggle("item-color")
    }
  })
})

.hidden {
  display: none;
}

.item {
  margin: 10px;
}

.item-color {
  background-color: red;
}

<div class="action">
  <div class="item">pizza</div>
  <div class="item">rice</div>
  <div class="item">spaghetti</div>
  <div class="item">honey</div>
  <div class="item">cheese</div>
</div>

Koala · Accepted Answer · 2022-08-02 13:01:30Z

0

Try something like this.

const action = document.querySelectorAll('.item');

action.forEach(function(item) {
  item.addEventListener('click', (e) => {
    item.classList.toggle('item-color');
    for(let i = 0; i < action.length; i++){
      if(e.currentTarget != action[i]){
        action[i].classList.remove('item-color');
      }
    }
  });
})

.hidden {
  display: none;
}

.item {
  margin: 10px;
}

.item-color {
  background-color: red;
}

  <div class="action">
      <div class="item">pizza</div>
      <div class="item">rice</div>
      <div class="item">spaghetti</div>
      <div class="item">honey</div>
      <div class="item">cheese</div>
  </div>

answered Aug 2, 2022 at 13:01

Koala

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Adding a CSS property to an HTML

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related