Search code examples
javascripthtmldomgetelementbyidevent-listener

How do I change the color of an object with getElementById("").style.color in JavaScript

I'm trying to change the color of the box to blue when the button2 (named "blue") is clicked.

This is the code which isn't working.... Could anyone help plz?

The DEMO

  document.getElementById("button1").addEventListener("click", function(){
     document.getElementById("box").style.height = "300px";
     document.getElementById("box").style.width = "300px";
  });


document.getElementById("button2").addEventListener("click", function(){

    document.getElementById("box").style.color = 'blue';
});
<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>

    <script type="text/javascript" src="Javascript.js"></script>

        

</body>
</html>

Solution

  • Change the background color instead of color property of HTML element.

    document.getElementById("button2").addEventListener("click", function(){    
    document.getElementById("box").style.backgroundColor = "blue";
});

    Please find working snippit below:

    document.getElementById("button2").addEventListener("click", function(){    
    document.getElementById("box").style.backgroundColor = "blue";
});
    <!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
</head>
<body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>

</body>
</html>