How do i change colors of two selected elements with css and javascript

Question

I'm working on some simple game for browser and i have this problem.

This is my HTML/PHP: (just 1 line that is important for this)

    echo '<div id="div'.$n.'" class="d'.$rand.'" onclick="swapit(this.id, this.className)"></div>';

I've got 4 different class names that are generated randomly and for them i got 4 different colors. And I'm using id just to know what exact element that is 'cause there are 13x8 elements like this randomly generated. ID is not random, it is increasing - 0,1,2,3,4...

This is my CSS:

.d0 {
    width:60px;
    height:50px;
    border:0;
    margin:8px 0 0 7px;
    padding:0;
    background-color:#0080FF;
    position:relative;
    float:left;
    cursor:pointer;
    box-shadow:0 0 1px #0080FF;
    border-radius:5px;
}

I've also defined d1,d2 and d3 but with different background colors. Id's are not defined anywhere in my css file.

And this is part of my JAVASCRIPT:

function swapit(id, classn)
{
    if(n == 0)
    {
        div1 = document.getElementById(id);
        color1 = document.getElementsByClassName(classn)[0].style.backgroundColor;      
        //alert(color1);
        //when i alert color1 it is blank       
        n++;
    }
    else
    {
        document.getElementById(id).style.backgroundColor = color1;
        div1.style.backgroundColor = document.getElementsByClassName(classn)[0].style.backgroundColor;
        n--;
    }
}

What I want is when i click on some blue div and then on some green div.. I want blue to become green and green to become blue. But it seems that I'm missing something with that style.backgroundColor property.. 'cause it doesn't return anything.

So please, help me :)

`.style` returns the **inline** styles of the element, e.g. `
`. In order to get styles from a stylesheet, you need to use getComputedStyle, as Ixe suggested, or you can use jQuery's `.css("background-color")` — Liftoff, May 18 '15 at 22:48

score 2 · Accepted Answer · answered May 18 '15 at 22:38

2

You should use getComputedStyle to get the styles applied via stylesheets:

// ...
var $el = document.getElementsByClassName(classn)[0];
alert(getComputedStyle($el).backgroundColor); 
// ...

answered May 18 '15 at 22:38

lxe

7,051
2
20
32

Thank you, that works fine now, but i also have one other problem now... my first div doesnt change in color of second div – Pero B May 18 '15 at 22:53

score 1 · Answer 2 · edited May 23 '17 at 11:59

1

See these two for further discussion about usage in different browsers:

edited May 23 '17 at 11:59

Community

1
1

answered May 18 '15 at 23:01

Jobst

529
3
12

score 1 · Answer 3 · answered May 18 '15 at 23:10

Thank you for all your answers, I just found one other solution that fixes all my problems.

function swapit(id, classn)
{
    if(n == 0)
    {
        div1 = id;
        class1 = classn;
        n = 1;
    }
    else
    {
        document.getElementById(id).setAttribute('class', class1);
        document.getElementById(div1).setAttribute('class', classn);
        n = 0;
    }   
}

How do i change colors of two selected elements with css and javascript

3 Answers3