Home/ Questions/Q 8191307
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:53:24+00:00

So here is my goal, i need to be able to determine what the

  • 0

So here is my goal, i need to be able to determine what the color of the background of a div that a user clicks on. Each div has a function that determines its background. How would i use javascript to keep track of the functions or would it be easier to send that data to the url so i can compare it to a predetermined code?

<?php "session_start" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>


<?php

$cols = array(

"#000000",
"#FFFFFF",
"#0000FF",
"#008000",
"#800080",
"#FF0000",
"#FFFF00",
"#DD7500",
"#4FD5D6",
"#CD6090", 
);

function getRandomColor1() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}





function getRandomColor2() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];    
unset($cols[$rand]);
return $rand_col;
}



function getRandomColor3() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor4() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor5() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand]; 
unset($cols[$rand]);
return $rand_col;
}



function getRandomColor6() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor7() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor8() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor9() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}


function getRandomColor10() {
global $cols;
$num_cols = count($cols);
$rand = array_rand($cols);
$rand_col = $cols[$rand];
unset($cols[$rand]);
return $rand_col;
}




?> 



<style media="screen" type="text/css">
#full {
height: 300px;
width: 750px;
border: 3px solid #999; 
margin: 0 auto;

} 



#boxone1 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor1(); ?>; ;
float: left;
} 

#boxone2 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor2(); ?>;  
float: left;
} 
#boxone3 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor3(); ?>;  
float: left;
} 
#boxone4 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor4(); ?>; 
float: left;
} 
#boxone5 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor5(); ?>; 
float: left;
} 


#boxtwo1 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor6(); ?>; 
float: left;
} 

#boxtwo2 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor7(); ?>; 
float: left;
} 
#boxtwo3 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor8(); ?>; 
float: left;
} 
#boxtwo4 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor9(); ?>; 
float: left;
} 
#boxtwo5 {  
height: 150px;
width: 150px;
background: <?php echo getRandomColor10(); ?>; 
float: left;
} 

</style>






<body>

<div id="full">

<div id="boxone1" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxone2" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxone3" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxone4" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxone5" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo1" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo2" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo3" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo4" onClick="window.location='?name='+this.id" style=""></div>

<div id="boxtwo5" onClick="window.location='?name='+this.id" style=""></div>
</div>
</div>



</body>
</html>

More or less, im wondering how i could collect the order in which colors are selected and compare them to a predetermined pattern. Would it be better to do this through js or through posting it in the url?
Either way, could someone demonstrate how it could be done?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d just add them to an array inside a click handler (using jQuery, but if you don’t like jQuery I can rewrite it without):

    var clickedColors = []
$('div').click(function() {
    clickedColors.push($(this).css('backgroundColor'));
});

    Then for the comparison part I’d just use JS logic. You might want to check out the Underscore.js library, as it has a lot of great functions for working with arrays.

    * * Edit * *

    Or, if you want a “least Javascript possible” approach, you could just send the background color through with onClick action you already have. You can do this by changing:

    window.location='?name='+this.id

    to:

    window.location='?name='+this.id+'&color='+this.style.backgroundColor

    This will give you a “color” parameter on the server-side which should have the background color of the div that got clicked.

    * * Edit #2 * *

    After chatting with the OP it seemed that the best approach (given their lack of Javascript knowledge) was to try and do as little Javascript as possible. We therefore settled on:

    1. putting the colors inside hidden inputs next to the div
    2. putting a form around the hidden input and div
    3. changing the onclick code to submit the form

    So now the user clicks, that div’s form gets submitted, the hidden input next to the div tells the server what color got clicked, and the OP is free to do whatever they want with the color on the server-side/in PHP.

    • 0