Home/ Questions/Q 6027209
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T04:33:30+00:00

I have a page that has a 4×4 grid and two squares change color

  • 0

I have a page that has a 4×4 grid and two squares change color one white and the other black. I need to know how to ammend the script to make the color white appear before the black one.

Please could someone help me to solve this issue, the code is pasted below:

html:

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> 
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen> 
<SCRIPT LANGUAGE="JavaScript" SRC="script1.js"> </SCRIPT> 
</head> 
<body>  
<div class="container">     
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div id="square1id" class="box"></div>      
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div id="square2id" class="box spacing"></div>     
<div class="box"></div>      
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box"></div>      
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box spacing"></div>     
<div class="box"></div> </div>  
</body> 
</html>

css:

body{
    background-color:#000000;
    margin:0;
    padding:0;
}

h1{
  color:#ffffff;
  text-align:center;
}

.container{
    overflow:hidden;
    width:860px;
    margin-left:250px;
    margin-top:20px;
}
.box{
    width:210px;
    height:120px;
    float:left;
    background-color:#4D4D4D;
    margin-bottom:3px;
}

.spacing{
    margin-right:3px;
}

JavaScript:

$(document).ready(function(){

var colourinfo = {
    square1id: [
                '#FFE600'


                ],

    square2id: [
                '#008B45'


                ]

};

var count = 0;

var changecol = function(){
    $.each(colourinfo, function(tileid, colarray){
    $('#'+tileid).css('background-color', colarray[count%colarray.length]);
}); 
    count++;
    };
    setInterval(changecol, 1000);
    });

I would appreciate any help on this. Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The following sets up an array where each element is an object giving the normal and highlight colour for each square. Called via setInterval() the changeColour() function changes the colour of the last square back to normal and the next square to highlight:

    var colourInfo = [
    {id : "square1id",
      colourNormal : "#4D4D4D",
      colourHighlight : "#FFE600"},
     {id : "square2id",
      colourNormal : "#4D4D4D",
      colourHighlight : "#008B45"}
     // add your other squares' info here
    ];

var index = 0;
var changeColour = function(){
    $('#'+colourInfo[index]["id"]).css('background-color',
                    colourInfo[index]["colourNormal"]);
    if (++index >= colourInfo.length)
       index = 0;
    $('#'+colourInfo[index]["id"]).css('background-color',
                    colourInfo[index]["colourHighlight"]);
}

setInterval(changeColour,1000);

    Note: the if statement in the middle of the changeColour() function just increments the index and keeps looping around and around the array in order. If you want the squares to change colour in random order you could replace the if statement with something like

    index = Math.floor(Math.random() * colourInfo.length);

    EDIT: I assumed above (due to David’s use of setInterval()) that the idea was to keep changing the colours indefinitely. Now that I find the idea was to flash each square once I’d suggest the following (untested) change. (Yes, I know this is getting clunky, but I couldn’t be bothered starting from scratch and I figure the point is to give David some ideas on how he might do it, not to do his work for him and present a beautifully unit-tested and documented masterpiece.)

    var index = -1;
var changeColour = function(){
     if (index > -1) {
        $('#'+colourInfo[index]["id"]).css('background-color',
                     colourInfo[index]["colourNormal"]);
     }
     if (++index < colourInfo.length) {
        $('#'+colourInfo[index]["id"]).css('background-color',
                        colourInfo[index]["colourHighlight"]);
        setTimeout(changeColour,1000);
     }
}
setTimeout(changeColour,1000);
    • 0