0

I have photo gallery. Every photo is placed in small div. I wanted to make effect when i click on photo, to make this div red color and it works already. But now i want the red div color change back into white when i click on it again. It would be some kind of selection effect I tried to improve my js code myself but i am very bad in it and it doesnt work

Here is how my photos are displayed from the loop

echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" style="background-color:white" onclick="clicked('.$photoid.');"></div>';

And this is my function 

function clicked(photoid){   
    var divcolor = document.getElementById(photoid.toString()).backgroundColor;

    if (divcolor = "white"){
        document.getElementById(photoid.toString()).style.backgroundColor = 'red';
    } else {
        document.getElementById(photoid.toString()).style.backgroundColor = 'white';
    }
}

It changes into red but not into white. What do i do? Please help me :D

Improve this question

3 Answers 3

Reset to default
1

Two problems are there

1) You are saying

var divcolor = document.getElementById(photoid.toString()).backgroundColor;

It will always return undefined you should say,

var divcolor = document.getElementById(photoid.toString()).style.backgroundColor;

2) you are saying

if (divcolor = "white")

Which is an assignment operator & never returns false, So it will never go to else condition.

say 

if (divcolor == "white")

To avoid problems like these, you should say

if ("white" == divcolor)

So if you use = at the place of == by mistake, it will throw an syntax error.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much for answer. I have already changed it but now its not even coloring on red now :( I dont understand debugging tools a lot but i think it shows me that divcolor is undefined. I tried adding to div this: style="background-color:white" but its still not working :(
0

In your comparison in the if statement you have an assignment operator, i.e. you've only used one =. To get a equality comparison use two, i.e. ==;

divcolor == "white"

Looking at what you're attempting, you might be better using a toggle feature using jQuery instead.

Hope this helps.

Improve this answer

1 Comment

It helps a lot, thank you! But it was kind of my oversight and i still got problem with my actual problem :/
0

You can take advantage of event bubbling and the this keyword to make your code more efficient like this...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script>
        function clicked(theElement) {
            var divcolor = theElement.style.backgroundColor;

            if (divcolor == "white") {
                theElement.style.backgroundColor = 'red';
            } else {
                theElement.style.backgroundColor = 'white';
            }
        }
    </script>
    <style>
        div {
            height: 200px;
            width: 200px;
            outline: 1px solid green;
        }
    </style>
</head>
<body>
    <div onclick="clicked(this);" style="background-color:white" >
        <img src="http://www.gravatar.com/avatar/d3b62f0eaa6fcaef8d8c76ba9f8a5ea4/?default=&amp;s=160" alt="photo" class="photolink" />
    </div>
</body>
</html>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.