Changing Colour of table Cells in a Loop

Question

Basically I want to create a lightboard its a 4x4 table which changes certain cells background colours in sequence

It should go yellow 1st , green 2nd,blue 3rd, white 4th, orange 5th then back to yellow and so on for infinite looping.

I have this code so far And after 1.5 seconds the cell turns yellow but then no other colours are showing and I get the error Uncaught TypeError: tInterval is not a function

<html>
<head>
<title>Light Board</title>
</head>

<body>

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
</style>
<table id="lightboard" class="tg" style=undefined;table-layout: fixed; width: 526px">
<colgroup>
<col style="width: 124px">
<col style="width: 129px">
<col style="width: 133px">
<col style="width: 140px">
</colgroup>
  <tr>
    <th class="tg-3as3" style="background-color:#404040";></th>
    <th class="tg-3as3" style="background-color:#404040";></th>
    <th class="tg-3as3" style="background-color:#404040";></th>
    <th id="white4" class="tg-3as3" style="background-color:#404040";></th>
  </tr>
  <tr>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td id="yellow1" class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
  </tr>
  <tr>
    <td id="blue3" class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td id="green2"class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
  </tr>
  <tr>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td id="orange5" class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
    <td class="tg-3as3" style="background-color:#404040";></td>
  </tr>
</table>

</body>

<script>

var yellow1 = document.getElementById("yellow1");
var green2 = document.getElementById("green2");
var blue3 = document.getElementById("blue3");
var white4 = document.getElementById("white4");
var orange5 = document.getElementById("orange5");

function tInterval() {
    tInterval = setInterval(doSequence, 1500)
}
function doSequence() {
if(i==1) { 
    yellow1.style.backgroundColor="rgb(255,255,0)";
}
else { 
    yellow1.style.backgroundColor="#404040";
}

if(i==2) {
    green2.style.backgroundColor="rgb(0,255,0)";
}
else {
    green2.style.backgroundColor="#404040";
}

if(i==3) {
    blue3.style.backgroundColor="rgb(0,0,255)";
}
else {
    blue3.style.backgroundColor="#404040";
}

if(i==4) {
    white4.style.backgroundColor="#FFFFFF";
}
else {
    white4.style.backgroundColor="#404040";
}

if(i==5) {
    orange5.style.backgroundColor="#FFA500";
}
else {
    orange5.style.backgroundColor="#404040";
}

}

var i = 0
var C_on = true

for(i=0; C_on; i++) {

tInterval()

if(i==6) { i=0 }
}

</script>

</html>

forgot `var` declaration and `semicolon`. also, i think `doSequence` should be `doSequence()` — odedta, Apr 21 '15 at 19:54
Please, make sure your browser console doesn't give out any errors. Make sure your code is validated. — odedta, Apr 21 '15 at 19:56

score 0 · Accepted Answer · edited May 23 '17 at 11:51

It looks like most of your problems are in handling setInterval. setInterval will be called repeatedly, so you don't need to call it again. Because of that, we also don't need your loop at the end. To test it press 'Run code snippet' at the bottom of the post.

I also took the liberty of cleaning it up. Some things that you should consider:

<td class="tg-3as3" style="background-color:#404040";></td> Put the semicolon inside the style attribute, like so: <td class="tg-3as3" style="background-color:#404040;"></td>, otherwise it's invalid HTML.
var i = 0 I suggest putting semicolons after all statements. See this post for why.

var yellow1 = document.getElementById("yellow1");
var green2 = document.getElementById("green2");
var blue3 = document.getElementById("blue3");
var white4 = document.getElementById("white4");
var orange5 = document.getElementById("orange5");

var i = 1;
// Call setInterval once. It will run itself repeatedly.
var t = setInterval(doSequence, 1500);

function doSequence() {
  if (i == 1) {
    yellow1.style.backgroundColor = "rgb(255,255,0)";
  } else {
    yellow1.style.backgroundColor = "#404040";
  }

  if (i == 2) {
    green2.style.backgroundColor = "rgb(0,255,0)";
  } else {
    green2.style.backgroundColor = "#404040";
  }

  if (i == 3) {
    blue3.style.backgroundColor = "rgb(0,0,255)";
  } else {
    blue3.style.backgroundColor = "#404040";
  }

  if (i == 4) {
    white4.style.backgroundColor = "#FFFFFF";
  } else {
    white4.style.backgroundColor = "#404040";
  }

  if (i == 5) {
    orange5.style.backgroundColor = "#FFA500";
  } else {
    orange5.style.backgroundColor = "#404040";
  }

  // We don't need the loop because setInterval is already being called repeatedly.
  i++;
  if (i == 6) {
    i = 1;
  }
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}
.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}
.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

<body>
  <table id="lightboard" class="tg" style="table-layout: fixed; width: 526px">
    <colgroup>
      <col style="width: 124px"></col>
      <col style="width: 129px"></col>
      <col style="width: 133px"></col>
      <col style="width: 140px"></col>
    </colgroup>
    <tr>
      <th class="tg-3as3" style="background-color:#404040;"></th>
      <th class="tg-3as3" style="background-color:#404040;"></th>
      <th class="tg-3as3" style="background-color:#404040;"></th>
      <th id="white4" class="tg-3as3" style="background-color:#404040;"></th>
    </tr>
    <tr>
      <td class="tg-3as3" style="background-color:#404040;"></td>
      <td id="yellow1" class="tg-3as3" style="background-color:#404040;"></td>
      <td class="tg-3as3" style="background-color:#404040;"></td>
      <td class="tg-3as3" style="background-color:#404040;"></td>
    </tr>
    <tr>
      <td id="blue3" class="tg-3as3" style="background-color:#404040;"></td>
      <td class="tg-3as3" style="background-color:#404040;"></td>
      <td id="green2" class="tg-3as3" style="background-color:#404040;"></td>
      <td class="tg-3as3" style="background-color:#404040;"></td>
    </tr>
    <tr>
      <td class="tg-3as3" style="background-color:#404040;"></td>
      <td id="orange5" class="tg-3as3" style="background-color:#404040;"></td>
      <td class="tg-3as3" style="background-color:#404040;"></td>
      <td class="tg-3as3" style="background-color:#404040;"></td>
    </tr>
  </table>
</body>

Changing Colour of table Cells in a Loop

1 Answers1