Home/ Questions/Q 8760445
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T15:02:47+00:00

I have my code that displays 92 selectors and each selector has a canvas(where

  • 0

I have my code that displays 92 selectors and each selector has a canvas(where is set a background color depending on the value from selector), in Jquery I set backgorund colors to canvas for the each value form selector, my problem is that when I click other selector it sets the backround color to the first Canvas(form the first selector but not on his own Canvas), I have 92 selector and each have CANVAS, how can I manage to do this in JQUERY…

Code

 <html>
   <head>
    <title>Tests</title>
    <style type="text/css">
     .table-container {
     display: inline-table;
     }
   table {
    width: 230px;
   }
  </style>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">      
 $(document).ready(function(){
  $('select').change(function() {
   var selected = $(this).find(':selected').val();
    if (selected == 'Forms') {
     $('#myCanvas').css('background','green');
    }
      if (selected == 'language Syntax') {
     $('#myCanvas').css('background','yellow');
     }
      if (selected == 'Fundamentals') {
     $('#myCanvas').css('background','red');
     }
      if (selected == 'Advanced Concepts') {
     $('#myCanvas').css('background','blue');
     }
      if (selected == 'New Concepts in PHP5') {
     $('#myCanvas').css('background','violet');
     } 
     if (selected == 'Operators and Functions') {
     $('#myCanvas').css('background','black');
     } 
     if (selected == 'Variables and Datatypes') {
     $('#myCanvas').css('background','brown');
     } 
     });
  });
   </script>
     </head>
    <body>
   <h3>Tests</h3>
  <div class="table-container">
 <table border="3">      
   <tr>
       <th>
 <?php
  $con = mysql_connect("localhost","root","sergios.com");
 if (!$con)
 {
 die('Could not connect: ' . mysql_error());
  }

 mysql_select_db("phptests", $con);


$result1 = mysql_query("SELECT * FROM question");

for($i=1;$i<93;++$i)
 { 
  $result = mysql_query("SELECT * FROM Category"); 
 echo "Number:".$i."<br />";
 echo "<select>";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC))
{
  echo "<option>" .  $line['name'] . "</option>";
}
echo "</select>"; 
?>
 <canvas id="myCanvas" width="20" height="20" style="border:1px solid #c3c3c3;">
   </canvas>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From what I observed, you are changing the same canvas element’s color (id=”myCanvas” => ‘#myCanvas’). Therefore, you need a way to uniquely associate each unique selector with each unique canvas.

    There are more elegant ways of recoding what you have coded. Due to the constraint of time, here is a sample by utilizing html element class names.

    // in php //////////
<?php
for($i=1;$i<93;++$i){ 
    $result = mysql_query("SELECT * FROM Category"); 
?>
    <br />
    Number: <?php echo $i; ?>
    <select class="<?php echo 'myCanvas_' . $i; ?>">
    <?php
    while($line = mysql_fetch_assoc($result)){
    ?>
        <option value="<?php echo $line['name']; ?>"><?php echo $line['name']; ?></option>
    <?php
    }
    ?>
    </select>
    <canvas id="<?php echo 'myCanvas_' . $i; ?>" width="20" height="20" style="border:1px solid #c3c3c3;"></canvas>
<?php
}
?>


$(document).ready(function(){
    $('select').change(function() {

        var toChangeCanvasId = '#' + $(this).attr('class');
        var selected = $(this).find(':selected').val();
        if (selected == 'Forms') {
            $(toChangeCanvasId).css('background','green');
        }
        if (selected == 'Fundamentals') {
            $(toChangeCanvasId).css('background','red');
        }

    });
});​
    • 0