2016-07-26 9 views
0

これは重複していることがわかりますが、私にとってはその答えのどれもうまくいきませんでした。私はホリデープロジェクトのようなSimonプログラムで作業しています。このJavaScriptコードの41行目で問題があります。事はHTMLファイル内に、IDがが存在し、またなっている 『ということであるヌルを』:.jsファイルが終了するのはここSimon.js:キャッチされていないタイプエラー:ヌルのプロパティ 'style'を読み取ることができません

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

    } 
} 

であり、これは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> 

誰でも助けてもらえますか?

+0

'console.log(color)'は何ですか? – epascarello

+0

@epascarelloそれはありません...私はちょうどこの初心者です...私はそれを検索したので、私はそれが何を意味するのかちょっと考えていますが、それを置く方法を知らないコード... –

+0

まあ、あなたはコンソールを使用する方法を学ぶ必要があります。 https://developers.google.com/web/tools/chrome-devtools/?hl=ja要素を選択する場所にその行を置きます。開発者コンソールに書き込まれたときの値を確認します。 – epascarello

答えて

-1

HTMLファイルの最後に任意のスクリプトタグを配置します。

コードが基本的にDOMがロードされる前に実行されているため、JavaScriptプログラムには処理するHTMLがありません。

+0

問題は次のとおりです:私はスタートボタンを押して、ランダムな色に点灯し、ユーザーはその色を押して、エラーを取得します...初めてLightColor関数を実行すると、irは動作しますが、 。 –

関連する問題