Changing div background color with Javascript
Question
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
3 answers
solution1
1 ACCPTED 2014-09-16 02:21:16
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.
solution2
0 2014-09-16 02:26:29
In your comparison in the if statement you have an assignment operator, ie you've only used one = . To get a equality comparison use two, ie == ;
divcolor == "white"
Looking at what you're attempting, you might be better using a toggle feature using jQuery instead.
Hope this helps.
solution3
0 2014-09-16 04:33:12
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=&s=160" alt="photo" class="photolink" />
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.