https://codepen.io/Muffinlord/pen/zdzaZV
<html>
<body>
<style>
html {
background-color: black;
}
table, tr, td {
border: 15px solid white;
}
td {
background-color: white;
height: 26px;
}
</style>
<style id="player">
{
background-color: red;
border: 15px solid red;
}
</style>
<style id="evil">
#id2 {
background-color: blue;
border: 15px solid blue;
}
</style>
<table style="width:100%">
<tr>
<td id="id1">
</td>
<td id="id2">
</td>
<td id="id3">
</td>
<td id="id4">
</td>
<td id="id5">
</td>
<td id="id6">
</td>
<td id="id7">
</td>
<td id="id8">
</td>
<td id="id9">
</td>
<td id="id10">
</td>
<td id="id11">
</td>
<td id="id12">
</td>
<td id="id13">
</td>
<td id="id14">
</td>
<td id="id15">
</td>
<td id="id16">
</td>
<td id="id17">
</td>
<td id="id18">
</td>
<td id="id19">
</td>
<td id="id20">
</td>
<td id="id21">
</td>
<td id="id22">
</td>
<td id="id23">
</td>
<td id="id24">
</td>
<td id="id25">
</td>
<td id="id26">
</td>
<td id="id27">
</td>
<td id="id28">
</td>
<td id="id29">
</td>
<td id="id30">
</td>
</tr>
<tr>
<td id="id31">
</td>
<td id="id32">
</td>
<td id="id33">
</td>
<td id="id34">
</td>
<td id="id35">
</td>
<td id="id36">
</td>
<td id="id37">
</td>
<td id="id38">
</td>
<td id="id39">
</td>
<td id="id40">
</td>
<td id="id41">
</td>
<td id="id42">
</td>
<td id="id43">
</td>
<td id="id44">
</td>
<td id="id45">
</td>
<td id="id46">
</td>
<td id="id47">
</td>
<td id="id48">
</td>
<td id="id49">
</td>
<td id="id50">
</td>
<td id="id51">
</td>
<td id="id52">
</td>
<td id="id53">
</td>
<td id="id54">
</td>
<td id="id55">
</td>
<td id="id56">
</td>
<td id="id57">
</td>
<td id="id58">
</td>
<td id="id59">
</td>
<td id="id60">
</td>
</tr>
<tr>
<td id="id61">
</td>
<td id="id62">
</td>
<td id="id63">
</td>
<td id="id64">
</td>
<td id="id65">
</td>
<td id="id66">
</td>
<td id="id67">
</td>
<td id="id68">
</td>
<td id="id69">
</td>
<td id="id70">
</td>
<td id="id71">
</td>
<td id="id72">
</td>
<td id="id73">
</td>
<td id="id74">
</td>
<td id="id75">
</td>
<td id="id76">
</td>
<td id="id77">
</td>
<td id="id78">
</td>
<td id="id79">
</td>
<td id="id80">
</td>
<td id="id81">
</td>
<td id="id82">
</td>
<td id="id83">
</td>
<td id="id84">
</td>
<td id="id85">
</td>
<td id="id86">
</td>
<td id="id87">
</td>
<td id="id88">
</td>
<td id="id89">
</td>
<td id="id90">
</td>
</tr>
</table>
</body>
</html>
<script>
var playerorig = document.getElementById("player").innerHTML;
for (i = 0; i < 29; i++) {
setTimeout(fixtimeout, 100);
}
function fixtimeout() {
document.getElementById("player").innerHTML = "#id" + (90 - i) + playerorig;
console.log(player);
}
</script>
Sorry for the messy code.
The table's bottom row is supposed to turn red one cell at a time until the one cell reaches the bottom left hand side. (each cell turns white again apart from the last)
This is supposed to happen with a 0.1 second delay between them. If I have brackets after fixtimeout in the setTimeout on line 223 the for loop ends at the second last cell.
I have no idea why the delay isnt happening and the for loop is being affected. Please help
