Tengo 8 párrafos y quiero que cuando haga clic en uno de estos 8 la clase, por ejemplo, 'uno', la 'clase p = "uno"' active "uno-activo" y elimine los otros activos
en menos de 20 lineas o algo mas eso es lo que he estado haciendo hasta ahora el codigo se ejecuta y funciona pero para ocho p> son demasiadas lineas de codigo como puedo hacer para hacer lo mismo con menos lineas de codigo. escribo solo para dos p porque es mucho código
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>Bueno, primero no necesitas una clase separada para cada elemento p . Solo una regla CSS para indicar que el elemento está activo es suficiente. Y tampoco necesita un controlador de clics para cada elemento, sino que puede tener un controlador de clics en el elemento principal para controlar la activación y desactivación.
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>