[thelist] Javascript: altering BG color of multiple divs with one click

Tue Nov 11 10:59:27 CST 2003

--- Dunstan Orchard <dunstan at 1976design.com> wrote:
> http://www.1976design.com/dev/divcolor/

Dunstan, here's another version that does what you want for the
second stuff, it's kind of hacky though. If you had other DIVs on the
page it would be a problem for starters. Again more info might help
on the whys and hows.. :)

Tom
-----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<title></title>
<style>
div {
	background-color: #eee;
	border: 1px solid #ddd;
	margin: 10px;
	padding: 10px;
	}

div:hover {
	background-color: #ddd;
	border: 1px solid #ccc;
	}
</style>
<script type="text/javascript">
//var lastDiv;

function ChangeBG(oDiv)
{
	//if(lastDiv) { lastDiv.style.backgroundColor = "#eee"; }
	ResetDivs();
	if(arguments[1])
	{
		var secondDiv = document.getElementById(arguments[1]);
		secondDiv.style.backgroundColor = "#cc3";
	}

	if(arguments[2])
	{
		var secondDiv = document.getElementById(arguments[2]);
		secondDiv.style.backgroundColor = "#cc3";
	}

	oDiv.style.backgroundColor = "#cc3";
	//lastDiv = oDiv;
}

function ResetDivs()
{
	var oDivs = document.getElementsByTagName("DIV");
	for(var i=0; i<oDivs.length; i++)
	{
		oDivs[i].style.backgroundColor = "#eee";
	}
}
</script>
</head>
<body>
<div id="one" onclick="ChangeBG(this);">Div 1</div>
<div id="two" onclick="ChangeBG(this);">Div 2</div>
<div id="three" onclick="ChangeBG(this, 'one');">Div 3 [clicking
should change colour of Div 1 as well]</div>
<div id="four" onclick="ChangeBG(this);">Div 4</div>
<div id="five" onclick="ChangeBG(this);">Div 5</div>
<div id="six" onclick="ChangeBG(this, 'one', 'three');">Div 6
[clicking should change colour of Div 1 and Div 3 as well]</div>
</body>
</html>

=====
http://www.pixelmech.com/ :: Web Development Services
http://www.DMXzone.com/ :: JavaScript Author / Every Friday!
http://www.thywordistruth.net/ :: Eternal Life

"I'll ho ho and ha ha you!" (Daffy Duck)