Adding a CSS property to an HTML-CodePudding

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 >
  <div >pizza</div>
  <div >rice</div>
  <div >spaghetti</div>
  <div >honey</div>
  <div >cheese</div>
</div>

**strong text**

CodePudding user response：

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.

CodePudding user response：

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 >
  <div >pizza</div>
  <div >rice</div>
  <div >spaghetti</div>
  <div >honey</div>
  <div >cheese</div>
</div>

CodePudding user response：

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 >
      <div >pizza</div>
      <div >rice</div>
      <div >spaghetti</div>
      <div >honey</div>
      <div >cheese</div>
  </div>