CODEWITHSUNDEEP
javascriptcsshtmlbackground-color
joshuatvernon
joshuatvernon

Reputation: 1621

Changing element individual style background-color with javascript

Element I want to change

<button id="thumb" onfocus="focus()" style="height: 12px; width: 12px; background-color: white; border-radius: 50%; margin: 0 auto; position: relative; top: -3px; left: 50%; box-shadow: 0px 0px 3px #888888;">
</button>

Function called:

function focus() {
    document.getElementById('thumb').style.background-color="blue";
}

The error:

Uncaught ReferenceError: Invalid left-hand side in assignment

I don't understand why this is an error. I think it might be because of the - symbol. It works with other styling e.g. document.getElementById('thumb').style.width="10px" works.

Upvotes: 0

Views: 1020

Answers (3)

Ryan Gavin
Ryan Gavin

Reputation: 729

An alternative way instead of using JavaScript is to use CSS to change the colour of the button on focus.

I have provided an example below I hope it helps.

CSS

.item-input:focus {
   background-color: blue;
}

CSS CLASS: Ensure to include class="item-input"

<button id="thumb" class="item-input" onfocus="focus()" style="height: 12px; width: 12px; background-color: white; border-radius: 50%; margin: 0 auto; position: relative; top: -3px; left: 50%; box-shadow: 0px 0px 3px #888888;">
</button>

Upvotes: 1

Mairaj Ahmad
Mairaj Ahmad

Reputation: 14624

Try this

document.getElementById('thumb').style.backgroundColor="blue";

Upvotes: 1

Suren Srapyan
Suren Srapyan

Reputation: 68685

With dash-ed styles you need to use camelCase. So with 

-lowerCase = Uppercase

For Example

background-color : backgroundColor;
font-size : fontSize


 function focus() {
     document.getElementById('thumb').style.backgroundColor="blue";
 }

Upvotes: 3

Related Questions