EDICIÓN
Como dejé en los comentarios, se me hace algo repetitivo el código dado lo cual pienso podemos tomar el siguiente script como ejemplo de la idea que trato de exponer:
- La botonera que esté dentro de una etiqueta padre a la cual le damos una clase general
- A cada uno de los botones les damos dos clases en común (esto lo emplearemos después)
- Una para obtener la referencia del objeto que lanzó el evento
- Otra para identificar que botón en específico es de los 3
- Escuchamos el click en el padre
- Evaluamos si ese elemento que tiene la referencia contiene una clase (la misma que le dimos a todos los botones previamente)
- En caso afirmativo del paso anterior, también establecemos la otra condición para identificar cual de los 3 botones es
- Una vez que ambas condiciones se cumplen entonces podemos aplicar los estilos CSS deseados
Código:
<div class="container">
<button class="container-button first">
Botón 1
</button>
<button class="container-button second">
Botón 2
</button>
<button class="container-button third">
Botón 3
</button>
</div>
<p class="parrafoX">Párrafo 1</p>
<p class="parrafoY">Párrafo 2</p>
<p class="parrafoZ">Párrafo 1</p>
<script>
let listaBotonera = document.querySelector('.container');
let parrafoUno = document.querySelector('.parrafoX');
let parrafoDos = document.querySelector('.parrafoY');
let parrafoTres = document.querySelector('.parrafoZ');
listaBotonera.addEventListener('click', (evento) => {
let elementTrigger = evento.target;
if (elementTrigger.classList.contains('container-button') && elementTrigger.classList.contains('first')) {
parrafoUno.style.color = 'teal';
} else if (elementTrigger.classList.contains('container-button') && elementTrigger.classList.contains('second')) {
parrafoDos.style.color = 'crimson';
} else if(elementTrigger.classList.contains('container-button') && elementTrigger.classList.contains('third')) {
parrafoTres.style.color = 'yellow';
}
});
</script>
Referencias
Postdata esto es un pobre acercamiento, son bienvenidas propuestas mas serias