CODEWITHSUNDEEP
javascripthtml
Emcrank
Emcrank

Reputation: 316

How to change background colour of cell

Bascially i am creating a lightboard 4x4 and i wish to light certain cells up in order, The id of the cell i wish to change background colour first is yellow1 is it something like this as it is not changing colour atm

Note: it is grey when the page loads (#404040)

Sorry for such short code earlier i was on mobile and thinking in my head. This is my full .html file with the table. Basically i want yellow 1 to go yellow then when thats yellow i want blue2 to go blue and yellow return to grey then i want green3 to go green and blue to return to grey and so on up to orange5 then i want to go back to yellow1 and keep it going on an infinite loop til the document is closed. this is my entire code and i still cannot get any of the cells to change colour..? I am also wanting it to wait 1.5 seconds between the colour changes as you can see ive looked into the setInterval function but still no luck.

<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");

        window.addEventListener("load", function() {
          yellow1.style.backgroundColor = "#404040";

       })


     tInterval()

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



           if(yellow1.style.backgroundColor == "rgb(255,255,0)")
           {
            yellow1.style.backgroundColor == "#404040";
              green2.style.backgroundColor="rgb(0,255,0)";
            return;
           }

    }
</script

Upvotes: 0

Views: 540

Answers (3)

Masoud Aghaei
Masoud Aghaei

Reputation: 1221

javascript can't access values of css you should assign its color using javascript before if statement

var yellow1 = document.getElementById("yellow1");

window.addEventListener('load', function(){
    yellow1.style.backgroundColor = "#404040";
})

if(yellow1.style.backgroundColor == "rgb(64, 64, 64)")
{ yellow1.style.backgroundColor = "#FFFF00"; }

now it works .

Upvotes: 0

Pratap Patil
Pratap Patil

Reputation: 234

I can see your getElementByID syntax is wrong it should be like:

var yellow1 = document.getElementById("yellow1");

and set color to that element like:

yellow1.style.backgroundColor  = "#FF0000";

Thanks

Upvotes: 0

shyamo
shyamo

Reputation: 46

also check getElementById, you have ID in uppercase should be "...Id" ,

sorry can't add comments yet as i dont have enough points, so had to write it as an answer

Upvotes: 1

Related Questions