Color changes with JavaScript

You could not see the changes because your div did not have any size.

Code:

const redButton = document.getElementById('redButton');
const blueButton = document.getElementById('blueButton');
const colorSquare = document.getElementById('colorDiv');
redButton.addEventListener('click', (e) => {
    colorSquare.style.backgroundColor = 'red';
});
blueButton.addEventListener('click', (e) => {
    colorSquare.style.backgroundColor = 'blue';
});

#colorDiv{
    width:10px;
    height:10px;
}

<button type="button" id="redButton">Click Me!</button>
<button type="button" id="blueButton">Click Me!</button>
<div id="colorDiv"></div>

Now about your doubt:

  

Could this also be solved with conditional if and else ?

Note that in this example you need a variable to be able to comply with the conditions of if and else .

To test the example, you must modify the value of the variable n , and you will see color changes.

var n = 30;//cambia el valor y veras cambios en el color del div

if (n >= 60)
{
    document.getElementById("miDiv").style.backgroundColor = 'red';
}
else  
if (n >= 41 && n <50)  
{
    document.getElementById("miDiv").style.backgroundColor = 'black';
}  
else  
if (n <=40)  
{
    document.getElementById("miDiv").style.backgroundColor = 'blue';
}

#miDiv{
    width:100px;
    height:100px;
}

<div id="miDiv">
</div>

As you very well told @ x-rw, what your code lacks to see the change of background color of your div is to assign a size.

However, I would like to give you a recommendation: do not change the styles directly with the attribute style of Javascript, if not using classes failing, which you can also change from Javascript.

Why not do it with the style attribute?

Because if you use:

colorSquare.style.backgroundColor = 'blue';

What you're really doing is this:

<div id="colorDiv" style="background-color: blue"></div>

According to CSS specificity , Inline styles added to an element (eg, style="font-weight: bold") always replace any style written in external style sheets , or what is the same, if you have a class or an ID overwriting This style, you will not be able to, since the inline styles are those that have a greater specificity.

Therefore, I recommend you use classes in their default and change them with Javascript.

• To add a class to an element:

  colorSquare.classList.add("rojo");
  

• To remove a class from an element:

  colorSquare.classList.remove("rojo");
  

Your modified example:

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>