stackoom
  简体   繁体   中英

Changing Colour of table Cells in a Loop

 原文  2015-04-21 19:53:10  2   1    javascript/ html

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>

1 answers

solution1
 0 ACCPTED  2015-04-21 20:37:37

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Changing Background Colour with a While Loop Changing colour of a particular index in a table Changing the Contents of Table Cells Changing the background colour of table rows using Javascript Changing glyphicons on click + table header colour change Changing a Table Row's colour onload Changing a table cell colour ifdepending on its neighbours Changing the colour of a specific word throughout an HTML table Changing colour of text in table cell with php and js Colour certain table cells created from javascript array
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM