CODEWITHSUNDEEP
javascriptgoogle-chrome
user3558529
user3558529

Reputation: 31

setting background color using javascript works in every browser but Chrome

I use the following function to allow a website user to click on a gray oval and see an indigo oval with a white check mark when they 'select' it, and back to a gray oval when they 'deselect' it.
It works exactly the way I want it to on every browser except Chrome 42.0.2311.90. On Chrome it works fine when 'selecting' it, but the background color doesn't change from indigo to dark gray when clicking it a second time to 'deselect' it. 

<script type=\"text/javascript\">

function clickeditem(checkaccount) {
    if (document.getElementById(checkaccount).style.backgroundColor==\"indigo\"){
        document.getElementById(checkaccount).style.backgroundColor=\"darkgray\";
    } else {
        document.getElementById(checkaccount).style.backgroundColor=\"indigo\";
    }
    if (document.getElementById(checkaccount).style.color==\"white\"){
        document.getElementById(checkaccount).style.color=\"darkgray\";
    } else {
        document.getElementById(checkaccount).style.color=\"white\";
    }
}

</script>

Upvotes: 3

Views: 1418

Answers (2)

user3558529
user3558529

Reputation: 31

The following works, thanks to GitaarLAB! 

function clickeditem(checkaccount) {
    checkaccount=document.getElementById(checkaccount);
    //change color
        if(checkaccount.style.color.toLowerCase() === 'white'){
           checkaccount.style.color = checkaccount.style.backgroundColor = 'darkgray';
        } else {
           checkaccount.style.backgroundColor = 'indigo';
           checkaccount.style.color = 'white';
        }
    }

Upvotes: 0

GitaarLAB
GitaarLAB

Reputation: 14645

Chrome 42.0.2311.90 seems to mess with the casing of named colors since adding a .toLowerCase() solves the problem for the asker.
The asker commented that my fiddle works for him: http://jsfiddle.net/99550tLc/

Here is a stack-snippet of that (which also simplifies the code and makes it a lot easier on the DOM):

function clickeditem(checkaccount){
    checkaccount=document.getElementById(checkaccount);
    if(checkaccount.style.color.toLowerCase() === 'white'){
       checkaccount.style.color = checkaccount.style.backgroundColor = 'darkgray';
    } else {
       checkaccount.style.backgroundColor = 'indigo';
       checkaccount.style.color = 'white';
    }
}
#tst{
    display: inline;
    width: 1em;
    border-radius:0.4em;
    background-color: darkgray;
    color: darkgray;
}
Select click to select option: 
<div id="tst" onclick="clickeditem('tst');">&#x2714;</div>

Upvotes: 1

Related Questions