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 class="one">COSA È</p>
<p class="two">COSA È</p>
<p class="three">COSA È</p>
<p class="four">COSA È</p>
<p class="five">COSA È</p>
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 class="container">
<p class="active">COSA È</p>
<p>COSA È</p>
<p>COSA È</p>
<p>COSA È</p>
<p>COSA È</p>
</div>