Soy un absoluto principiante y estoy tratando de manejar AddEventListener. Sencillamente, el HTML consta de un div que debe cambiar de color al apretar el button. El error de consola es "addEventListener is not a function". Observan algo en el código que pueda estar generando este problema tan básico? Muchas gracias.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listeners de Eventos</title>
<link rel="stylesheet" href="css/styling01.css">
</head>
<body>
<div class="colordiv">EN ESTADO INICIAL</div>
<button class="btnCambiaColor">EN CAMBIAR COLOR</button>
<script src="js/js01.js"></script>
</body>
</html>
CSS
/*estado inicial*/
.colordiv
{
width: 200px;
height: 200px;
background-color:orange ;
color:beige ;
text-align: center;
line-height: 200px;
}
/*estado alternativo*/
.colorAlternativo
{
width: 200px;
height: 200px;
background-color:blue ;
color:beige ;
text-align: center;
line-height: 200px;
}
JS
let divEstado= document.getElementsByClassName("colordiv");
let btn1= document.getElementsByClassName("btnCambiaColor");
console.log(btn1);
btn1.addEventListener("click", CambiaColor);
function CambiaColor()
{
divEstado.ClassListadd("colorAlternativo");
console.log("cambió a color alternativo porque hizo click en el botón");
}
Según entiendo, addEvent... sería un método del objetobtn1 capturado. Al escuchar el click, simplemente debería llamar a la función CambiaColor y cambiar la clase. Entiendo que es algo muy básico. Y el error debe serlo también. Gracias.