Simon.js：未捕获TypeError：无法读取null的属性'样式'

我知道您可能会发现这种复制，但对于我来说它没有任何答案。我正在做一个像节日项目一样的Simon程序，并且我在第41行的JavaScript代码中遇到了麻烦。问题是，在HTML文件中，IDS'存在，但也越来越‘空’：Simon.js：未捕获TypeError：无法读取null的属性'样式'

var pccolor = []; 
var usercolor = []; 

function SimonStart() { 

    document.getElementById("start").style.opacity = .3; 

MakeColors(); 
} 

function MakeColors() { 

    var colors = [1, 2, 3, 4, 6, 7, 8, 9]; 
    var randcolor = colors[Math.floor(Math.random() * colors.length)]; 
    pccolor.push(randcolor); 
    LightColor(randcolor, 1000); 

} 

var randcolor; 
var s; 

function LightUp() { 

    LightColor(pccolor[s]); 
    s++; 

    if (s < pccolor.length) { 

     setTimeout(function() { 
      LightUp(); 

     }, 500); 

    } 
} 

function LightColor(color, TimeOut) { 

    var TimeOut = 1000; 
    document.getElementById("c" + color).style.opacity = "1"; //doesn't work! 
    setTimeout(function() { 

     document.getElementById("c" + color).style.opacity = ".3"; 

    }, TimeOut); 

} 

function Button(OnClick) { 

    LightColor(OnClick); 
    usercolor.push(OnClick); 
    var i = usercolor.length - 1; 
    if (pccolor[i] != usercolor[i]) { 

     setTimeout(function() { alert("You lose!"); }, 300); 
     pccolor = []; 
     usercolor = []; 

    } else if (pccolor.length == usercolor.length) { 

     usercolor = []; 
     pccolor.push(randcolor); 
     s = 0; 
     setTimeout(function() { 

      LightUp(); 
     }, 500); 

    } 
}

这里就是js文件的目的，而这一次是HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
... 

<script type="text/javascript" src="Simon.js"></script> 

<link rel="stylesheet" type="text/css" href="Simon.css"> 

</head> 

<body> 
    <div class="centerDiv"> 
     <div class="negro"> 
      <div class="color" id="c1" onclick="Button (1);"> </div> 
      <div class="color" id="c2" onclick="Button (2);"> </div> 
      <div class="color" id="c3" onclick="Button (3);"> </div> 
     </div> 
     <div class="negro"> 
      <div class="color" id="c4" onclick="Button (4);"> </div> 
      <div class="color" id="start" onclick="SimonStart();"></div> 
      <div class="color" id="c6" onclick="Button (6);"> </div> 
     </div> 
     <div class="negro"> 
      <div class="color" id="c7" onclick="Button (7);"> </div> 
      <div class="color" id="c8" onclick="Button (8);"> </div> 
      <div class="color" id="c9" onclick="Button (9);"> </div> 
      </div> 
    </div> 

</body> 
</html>

任何人都可以帮我吗？

来源

2016-07-26 Jaz_GV

'console.log（color）'是什么？ – epascarello

@epascarello它没有那个...我只是一个初学者...现在我已经搜索了它，我对这意味着什么有点想法，但不知道如何把它放入代码... –

那么你需要学习如何使用控制台。 https://developers.google.com/web/tools/chrome-devtools/?hl=en因此，把那一行放在你选择元素的地方。查看写入开发人员控制台时的值。 – epascarello

-1

将任何脚本标记放在HTML文件的末尾。

你的代码基本上是在DOM加载之前执行的，所以你的JavaScript程序没有HTML处理。

来源

2016-07-26 18:52:18

问题是：我按开始按钮，它点亮一个随机的颜色，用户按下该颜色，并得到错误...第一次它执行LightColor函数，红外线的作品，但第二次没有.. 。 –

Simon.js：未捕获TypeError：无法读取null的属性'样式'

回答

相关问题