Partiendo de tu código te comento lo siguiente:
- Al usar el selector
getElementsByClassName
te estaría retornando N elementos, por lo cual directo no puedes darle un listener; debes:- iterar los nodos recuperados
- indicar el índice del elemento deseado
- Ya que los estilos de
display
son repetitivos entonces mejor colócalos en variables al inicio y asigna estas como valor dinámico - En estos casos es mejor usar
querySelector
para recuperar elementos por un selector específico y que nos retorne solo un nodo (haciendo referencia a donde intentas recuperar afundInfo
) - Puedes emplear
load
para asegurar que todos los recursos se han descargado completamente asociando esto al objeto window
Código:
window.addEventListener('load', () => {
let boton1 = document.querySelector('.but1');
let boton2 = document.querySelector('.but2');
let boton3 = document.querySelector('.but3');
let boton4 = document.querySelector('.but4');
let fundInfo = document.querySelector('.fund-info');
let tabUno = document.querySelector('.tab1');
let tabDos = document.querySelector('.tab2');
let tabTres = document.querySelector('.tab3');
let tabCuatro = document.querySelector('.tab4');
let displayBlock = 'block';
let displayNone = 'none';
boton1.addEventListener('click', () => {
fundInfo.style.display = displayNone;
tabUno.style.display = displayBlock;
});
boton2.addEventListener('click', () => {
fundInfo.style.display = displayNone;
tabDos.style.display = displayBlock;
});
boton3.addEventListener('click', () => {
fundInfo.style.display = displayNone;
tabTres.style.display = displayBlock;
});
boton4.addEventListener('click', () => {
fundInfo.style.display = displayNone;
tabCuatro.style.display = displayBlock;
});
});
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