El error btn.addEventListener no es una función
aparece porque la variable btn
es un array de elementos y el método addEventListener
se utiliza en un elemento DOM y no en un array de elementos.
Cuando utilizas btn=document.getElementsByClassName('btnCambiarColor')
obtendrás un HTMLCollection
[button.btnCambiarColor]
Este es un objeto que representa una colección de elementos que se utiliza para almacenar un grupo de elementos que comparten el mismo padre.
button.btnCambiarColor
es el objeto HTMLCollection que contiene un único elemento de botón con la clase btnCambiarColor, y el índice 0 en el objeto se refiere al primer elemento de la colección, que es el propio botón.
Cuando declaras
btn=document.getElementsByClassName('btnCambiarColor');
obtienes una colección de todos los elementos de la página que tienen la clase btnCambiarColor
.
Para corregirlo, indica el índice 0:
btn=document.getElementsByClassName('btnCambiarColor')[0];
btn=document.getElementsByClassName('btnCambiarColor')[0];
btn.addEventListener('click', function () {
btn.classList.toggle('active');
});
.btnCambiarColor {
background-color: red;
border-radius: 5px;
padding: 7px;
font-size: 16px;
cursor: pointer;
}
.btnCambiarColor.active {
background-color: blue;
color: white;
}
<button class="btnCambiarColor">Cambiar color</button>
getElementsByClassName : ...Web/API/Document/getElementsByClassName
HTMLCollection : ...dom_obj_htmlcollection