change color of multi-text in less 20 lines code-CodePudding

I have 8 paragraphs and I want that when I click on one of these 8 the class for example 'one' the 'p class = "one"' activates "one-active" and removes the others active

in less than 20 lines or something more that's what I've been doing up to now the code run and it's works but for eight p> is too much lines of code how can i do for do the same thing with less lines of code. i write only for two p because is a lot of code

let one = document.querySelector('.one')
let two = document.querySelector('.two')
let three = document.querySelector('.three')
let four = document.querySelector('.four')
let five = document.querySelector('.five')

function changecolor1(){
  one.classList.toggle('one-active');
  two.classList.remove('two-active');

} 
function changecolor2(){
  two.classList.toggle('two-active');
  one.classList.remove('one-active')

}   
  
  const ButtonChange1 = () => {
    one.addEventListener('click', () => {
      changecolor1();
    });
  }
  ButtonChange1();
  
  const ButtonChange2 = () => {
    two.addEventListener('click', () => {
      changecolor2();
    });
  }
  ButtonChange2();

.one{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.one-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }
  .two{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.two-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }
  .three{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.three-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }
  .four{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.four-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }

  .five{
    color: rgb(11, 28, 47);
    background-color: rgb(255, 255, 255);
  }
  
  
.five-active{
    color: rgb(255, 255, 255);
    background-color: rgb(11, 28, 47);
  }

            <p >COSA È</p>
            <p >COSA È</p>
            <p >COSA È</p>
            <p >COSA È</p>
            <p >COSA È</p>

CodePudding user response：

Well, first you don't need a separate class for each p element. Just one CSS rule to indicate that item is active is enough. And you also don't need a click handler for each element instead you can have one click handler on the parent to handle activation and de activation.

let container = document.querySelector(".container");

container.addEventListener("click", ({
  target
}) => {
  if (target.nodeName !== "P") return; // return if p is not clicked
  Array.from(document.querySelectorAll(".container>p")).forEach(p => p.classList.remove("active")); // make the others inactive
  target.classList.toggle("active");
});

.container p {
  color: rgb(11, 28, 47);
  background-color: rgb(255, 255, 2);
}

.container p.active {
  color: rgb(255, 255, 255);
  background-color: rgb(11, 28, 47) !important;
}

<div >
  <p >COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
  <p>COSA È</p>
</div>