Como muy bien te ha comentado @x-rw, lo que le falta a tu código para que se vea el cambio de color de fondo de tu div
es asignarle un tamaño.
Sin embargo, me gustaría darte una recomendación: no cambies los estilos directamente con el atributo style
de Javascript, si no que usa clases en su defecto, las cuales también puedes cambiar desde Javascript.
¿Por qué no hacerlo con el atributo style?
Porque si tu utilizas:
colorSquare.style.backgroundColor = 'blue';
lo que estás haciendo en realidad es esto:
<div id="colorDiv" style="background-color: blue"></div>
Según la especificidad de CSS, los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sustituyen a cualquier estilo escrito en hojas de estilo externas, o lo que es lo mismo, si tienes una clase o un ID sobreescribiendo este estilo, no vas a poder, ya que los estilos inline son los que tienen una mayor especificidad.
Por lo tanto, te recomiendo usar clases en su defecto y cambiarlas mediante Javascript.
Para añadir una clase a un elemento:
colorSquare.classList.add("rojo");
Para quitar una clase a un elemento:
colorSquare.classList.remove("rojo");
Tu ejemplo modificado:
const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');
const colorSquare = document.getElementById('colorDiv');
redButton.addEventListener('click', (e) => {
colorSquare.classList.remove("azul");
colorSquare.classList.add("rojo");
});
blueButton.addEventListener('click', (e) => {
colorSquare.classList.remove("rojo");
colorSquare.classList.add("azul");
});
#colorDiv{
width:10px;
height:10px;
}
.azul{
background-color: blue;
}
.rojo{
background-color: red;
}
<button type="button" id="redButton">Click Me!</button>
<button type="button" id="blueButton">Click Me!</button>
<div id="colorDiv"></div>