JavaScriptエラーの個々のスタイル要素へのアクセス

JSを使用して色を推測するゲームを構築しようとしています。私は最初の色のリストを持つカラー配列を使用しています。今のところ、コード全体は、各色の四角形がクリックされたときに警告を表示するまで機能します。JavaScriptエラーの個々のスタイル要素へのアクセス

Uncaught TypeError: Cannot read property 'style' of undefined at HTMLDivElement. (color_game.js:25)

ライン25ポイントこれに：コンソールで

は、私はエラーを取得する

var clickedColor = squares[i].style.background;

をここで、私は、アレイ内の各正方形のスタイルへの参照を取得しようとしています。（下のsrcを見てください）

それ以上の検査でsthは定義されていません。

私の完全なコードは以下に添付されています HTML：

<body> 

    <h1>The Great <span id="colorDisp">RGB</span> Guessing Game</h1> 
    <div id="container"> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    <div class="square"> 

    </div> 
    </div> 

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

</body>

JavaScriptのコード：

var colorArr = [ 
    "rgb(255, 0, 0)", 
    "rgb(255, 255, 0)", 
    "rgb(0, 255, 0)", 
    "rgb(0, 255, 255)", 
    "rgb(0, 0, 255)", 
    "rgb(255, 0, 255)" 
]; 

var squares = document.querySelectorAll(".square"); 
var pickedColor = colorArr[3]; 
var colorDisp = document.getElementById("colorDisp"); 
colorDisp.innerHTML = pickedColor; 

for (var i = 0; i < squares.length; i++) { 
    squares[i].style.background = colorArr[i]; 

    squares[i].addEventListener("click", function() { 

    var clickedColor = squares[i].style.background; 
    alert(clickedColor); 

    if (clickedColor === pickedColor) { 
     alert("CORRECT"); 
    } else { 
     alert("WRONG COLOR!!!"); 
    } 

    }); 
}

私はこれらの2行を試してみましたが、私のコードは実行されません：

var clickedColor = squares[i].style.background;

および

var clickedColor = this.style.background;

JSの配列のスタイル要素にアクセスする方法を教えてもらえますか？

出典

2017-08-02 Anand Rajput

エラーを返す行を 'var clickedColor = event.target.style.background;に変更してみてください。 – Kevin

' console.log（i） 'をその行の上に置き、ブラウザコンソール...（私はちょうど、この特定の問題についての終わりのない流れで_closure_を得るだろうと思っています...？） – CBroe

イベントを使用してターゲット要素を取得します。

squares[i].addEventListener("click", function(e) { 

    var clickedColor = e.target.style.background; 
    alert(clickedColor); 

    if (clickedColor === pickedColor) { 
    alert("CORRECT"); 
    } else { 
    alert("WRONG COLOR!!!"); 
    } 

});

出典

2017-08-02 20:22:32

お互いに感謝します。それは今働く。誰かがe.target.style.backgroundの仕組みを私に説明することはできますか？ありがとうございました –

"e"は、Javaスクリプトがイベントリスナーのコールバックに渡すイベントオブジェクトです。このオブジェクトには、ユーザーがクリックしたタグ、イベントのタイプなど、イベントに関する情報（この場合はクリック）が含まれています。 –

さて、ありがとう@Praveen –

私は2つの小さな変更を行い、それは私のために働いた。

<div>のテキストを追加するように変更されたHTML部分。例えば

<div id="container"> 
     <div class="square"> 
      A 
     </div> 
     <div class="square"> 
      B 
     </div> 
     <div class="square"> 
      C 
     </div> 
     <div class="square"> 
      D 
     </div> 
     <div class="square"> 
      E 
     </div> 
     <div class="square"> 
      F 
     </div> 
    </div>

その後変更されたライン

var clickedColor = squares[i].style.background;

var clickedColor = this.style.background;

にそれが今の私のために正しく動作します。

出典

2017-08-02 20:43:35 MKR

ありがとう。イベントは今働いています。 –

JavaScriptエラーの個々のスタイル要素へのアクセス

答えて

関連する問題