Am I using setAttribute correctly? When I click reset after say clicking "blue" button, box has no color but it seems like it is still setting the height to 150px. What am i doing wrong here?

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



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


document.getElementById("button4").addEventListener("click", function() {
  document.getElementById("box").setAttribute("style", "backgroundColor: orange; height:150px");
});

<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>

Am I using setAttribute correctly? When I click reset after say clicking "blue" button, box has no color but it seems like it is still setting the height to 150px. What am i doing wrong here?

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



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


document.getElementById("button4").addEventListener("click", function() {
  document.getElementById("box").setAttribute("style", "backgroundColor: orange; height:150px");
});

<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>

• javascript
• html

3 Answers 3

Your error is that you are using backgroundColor instead of background-color

Button Reset1 is the correct way to write your function, but it is overriding all the styles (like the width, padding, margin...)

So I wrote another function on click of the button Reset 2 that must do what you are looking for. But you must try it, without clicking on Reset 1 since it will remove all the other styles

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

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

document.getElementById("button4").addEventListener("click", function(){
    document.getElementById("box").setAttribute("style","background-color:orange; height:150px");
});

document.getElementById("button5").addEventListener("click", function(){
    document.getElementById("box").style.height="150px";
    document.getElementById("box").style.backgroundColor="orange";
});

<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 1</button>
<button id="button5">Reset 2</button>

Remember that setAttribute overrides all your other styles and always try to use their properties from the style object like you did in other click events.

You are almost there

If you still trying to learn with setAttribute, the problem is that there is no backgroundColor in native css. You have only background-color. Change it and it works.

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



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


document.getElementById("button4").addEventListener("click", function(){
  document.getElementById("box").setAttribute("style","background-color:orange; height:250px");
  });

<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>

Do not confuse with javascript properties and with native css properties. Javascript represents css properties with camelcase letters with in style object of element.

You can use the document.getElementById("box").style like you did before.

document.getElementById("button4").addEventListener("click", function(){
    document.getElementById("box").style.backgroundColor="orange";
    document.getElementById("box").style.height="150px"
});