Question

基本上我正在创建一个4x4的灯板，我希望按顺序点亮某些单元格，我希望首先更改背景颜色的单元格的id是yellow1就是这样的，因为它不会改变颜色atm

注意：页面加载（#404040）

时为灰色

很抱歉这个简短的代码早些时候我在移动设备上思考并思考。这是我的完整.html文件与表。基本上我想要黄色1变成黄色然后当那个黄色我想蓝色2变蓝色和黄色返回灰色然后我想绿色3变为绿色和蓝色返回灰色等等到橙色5然后我想回到黄色1并在文档关闭时保持无限循环。这是我的整个代码，我仍然无法让任何细胞改变颜色..？我也希望它在颜色变化之间等待1.5秒，因为你可以看到我调查了setInterval函数，但仍然没有运气。

<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

Answer 1

同时检查getElementById，你有大写的ID应该是＆＃34; ... Id＆＃34; ，

抱歉，由于我没有足够的积分，抱歉无法添加评论，所以不得不把它写成答案

Answer 2

我可以看到你的getElementByID语法错误应该是这样的：

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

并将颜色设置为该元素，如：

yellow1.style.backgroundColor  = "#FF0000";

由于

Answer 3

javascript无法访问css的值，您应该在if语句之前使用javascript分配其颜色

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

现在可行。

如何更改单元格的背景颜色

3 个答案: