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

user_13023340 0
Viewed 1408

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>

event-listener getelementbyid dom html javascript
2 Answers

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>

user_105786380

you use wrong attribute change color to background instead 

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

<button id="button0">Grow</button>

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

const box = document.getElementById('box');

document.getElementById('button0').addEventListener('click', e => {
    box.style.width = '500px';
    box.style.height = '500px';
})

const Grow = e => {
    box.style.width = '300px';
    box.style.height = '300px';
}

const Blue = e => {
    box.style.background = 'blue';
}
const Reset = e => {
    box.setAttribute('style', 'height:150px; width:150px; background-color:orange; margin:25px');
}
user_22304740
Related