php - Use Javascript to keep track of a function unique to each div -
so here goal, need able determine color of background of div user clicks on. each div has function determines background. how use javascript keep track of functions or easier send data url can compare 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 collect order in colors selected , compare them predetermined pattern. better through js or through posting in url? either way, demonstrate how done?
i'd add them array inside click handler (using jquery, if don't jquery can rewrite without):
var clickedcolors = [] $('div').click(function() { clickedcolors.push($(this).css('backgroundcolor')); }); then comparison part i'd use js logic. might want check out underscore.js library, has lot of great functions working arrays.
* * edit * *
or, if want "least javascript possible" approach, send background color through onclick action have. can changing:
window.location='?name='+this.id to:
window.location='?name='+this.id+'&color='+this.style.backgroundcolor this give "color" parameter on server-side should have background color of div got clicked.
* * edit #2 * *
after chatting op seemed best approach (given lack of javascript knowledge) try , little javascript possible. therefore settled on:
- putting colors inside hidden inputs next div
- putting form around hidden input , div
- changing onclick code submit form
so user clicks, div's form gets submitted, hidden input next div tells server color got clicked, , op free whatever want color on server-side/in php.
Comments
Post a Comment