Populate certain divs/ Leave others empty [Archive]

vmhu

03-15-2008, 11:56 AM

Example: http://victorhu.com/show4.html

I have four divs. How can I use an onclick event to populate only three at a time and empty the fourth? For instance, when I first load the page and click "Blue", 3 of the 4 divs will be populated with blue "x"'s. Clicking "Red" next will give me three red "x"'s, but one blue character remains. Is there a way to empty all four divs before or simultaneous to "onclick"?

Hopefully this doesn't seem ridiculous. It's actually an exercise for something bigger I want to do. Ultimately, I will have something like 10 divs and have each link populate a particular set of divs. If there is any way to streamline or combine some of my functions, that would be a bonus, but really I would just like to solve the aforementioned problem. Seems like it should be easy for a more experienced coder. Thanks,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RGB</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<STYLE type="text/css">
#text1 {
position: absolute;
left: 15px;
top: 100px;}

#text2 {
position: absolute;
left: 15px;
top: 200px;}

#text3 {
position: absolute;
left: 115px;
top: 100px;}

#text4 {
position: absolute;
left: 115px;
top: 200px;}

</STYLE>

<script type="text/javascript">

var atext1 = new Array("<span style=color:#00f>x</span>", "<span style=color:#f00>x</span>", "<span style=color:#0f0>x</span>");
var atext2 = new Array("<span style=color:#00f>x</span>", "<span style=color:#f00>x</span>", "<span style=color:#0f0>x</span>");
var atext3 = new Array("<span style=color:#00f>x</span>", "", "<span style=color:#0f0>x</span>");
var atext4 = new Array("", "<span style=color:#f00>x</span>", "<span style=color:#0f0>x</span>");

function poptext1(num) {
document.getElementById("text1").innerHTML="<br>"+atext1[num]+"<br>";
}

function poptext2(num) {
document.getElementById("text2").innerHTML="<br>"+atext2[num]+"<br>";
}

function poptext3(num) {
document.getElementById("text3").innerHTML="<br>"+atext3[num]+"<br>";
}

function poptext4(num) {
document.getElementById("text4").innerHTML="<br>"+atext4[num]+"<br>";
}

</script>

</head>

<body>

<div>
<a href="#"onclick="poptext1(0);poptext2(0);poptext3(0)">Blue</a><br />
<a href="#"onclick="poptext1(1);poptext2(1);poptext4(1)">Red</a><br />
<a href="#"onclick="poptext1(2);poptext3(2);poptext4(2)">Green</a><br /></div>

<div id="text1"></div>
<div id="text2"></div>
<div id="text3"></div>
<div id="text4"></div>

</body>
</html>

mjlorbet

03-16-2008, 03:07 AM

in keeping with your conventions, you would call an extra function like this one:

function empty(){
document.getElementById("text1").innerHTML = "";
document.getElementById("text2").innerHTML = "";
document.getElementById("text3").innerHTML = "";
document.getElementById("text4").innerHTML = "";
}

additionally, if you're writing "xhtml" please close change <br> to <br />, also note that you do need to enclose field values in html tags (even if they're in a string to be written) in quotes (you can use ' so that you don't break your outer quotes or \"), also ms doesn't really support the application/xhtml+xml mime type in ie yet.

a closer to DOM compliant way of doing this:

function empty(){
while(document.getElementById("text1").children.length > 0)
document.getElementById("text1").removeChild(document.getElementById("text1").children[0]);
while(document.getElementById("text2").children.length > 0)
document.getElementById("text2").removeChild(document.getElementById("text2").children[0]);
while(document.getElementById("text3").children.length > 0)
document.getElementById("text3").removeChild(document.getElementById("text3").children[0]);
while(document.getElementById("text4").children.length > 0)
document.getElementById("text4").removeChild(document.getElementById("text4").children[0]);
}