0

Quiero hacer que, cuando el usuario de clic en un botón, se ejecute una función, que lo haga cambiar de color, pero al hacer el eventListener , me dice que "btn.addEventListener" is not a function. Alguien sabe porqué? Mi código es el siguiente:

btn=document.getElementsByClassName('btnCambiarColor');
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>

3 respuestas 3

3

Lo que pasa es que, a la variable btn, si obtienes el elemento con className (getElementsByClassName()) , no funciona, al igual que con querySelectorAll. Tienes que obtenerlo por id. El código quedaria así:

btn=document.getElementById('btn');
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" id="btn">Cambiar Color</button>

1

getElementsByClassName, así como getElementsByTagName y querySelectorAll, devuelven una lista de elementos y no un elemento puntual. Por lo tanto no poseen el método addEventListener.

Sus elementos sí poseen dicho método. Solo tienes que hacer es acceder a los que te interesen y hacer lo que quieras con cada uno, uno por uno.

Estas listas no son precisamente Arrays o objetos de la misma clase. En cualquier caso puedes crear uno a partir de ellas mediante Array.from.


Supongamos que quieres agregar un listener a todos los botones, puedes hacerlo así:

const botones = Array.from(document.querySelectorAll('button'))
botones.forEach(boton =>
   boton.addEventListener('click', () =>
      console.log(boton.textContent)
   )
)
<button>Botón 1</button>
<button>Botón 2</button>
<button>Botón 3</button>

Recuerda que siempre es buena idea tener la documentación a mano.

1

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.