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的屬性'樣式'

回答

相關問題