何か関数ではありませんが、それが見つからないというエラーが引き続き発生します

私は145のボックスがあり、5つおきのすべてが白であるクラスのために何かを作成しようとしています。ボックスをクリックすると、色が反対の色に変わり、その上にマウスを置くと不透明度が変わるはずです。私は145個のボックスを正しい方法で作成することができましたが、クリックの変更方法を理解することはできません。私は何らかの形で与えられたhtmlを変更することができないので、それらを変更するために関数とイベントリスナーを使用する必要があります。私は、白いボックスにクリックされたブラックボックスを変更する機能を作成しようとしましたが、それは機能ではないと言います（最後の行のエラー）。私はたぶん単純な間違いをしているのですが、誰かが私を助けたり、私を正しい方向に押し込んだりすることができます。何か関数ではありませんが、それが見つからないというエラーが引き続き発生します

Htmlの（与えられた）：

<html> 
<head> 
    <title>A test</title> 

    <script> 

    </script> 
</head> 
<body style="background-color:#337799; margin:0px; padding:0px;"> 
    <div id="wrapper" style="width:960px; overflow:hidden; margin:auto; background-color:black;"> 
    </div> 
</body> 
<script src="assignment10.js"></script>

JS：

var blackBg = document.getElementById('wrapper'); 

for (var i=1; i<145; i++){ 

var repeatSq = document.createElement('div'); 

repeatSq.style.float = "left"; 
repeatSq.style.height = "50px"; 
repeatSq.style.width = "50px"; 
repeatSq.style.backgroundColor = "black"; 
repeatSq.style.opacity = ".5"; 
repeatSq.style.border = "solid black 5px"; 
repeatSq.className = "black"; 

if(i%5 === 0){ 
    repeatSq.style.backgroundColor= "white"; 
    repeatSq.style.border= "solid white 5px"; 
    repeatSq.className = "white"; 
} 

blackBg.appendChild(repeatSq); 

} 

var blackBoxes = document.getElementsByClassName('black'); 

var boxChange = function(evt){ 

evt.target.style.backgroundColor="white"; 
evt.target.style.border = "solid white 5px"; 

} 

blackBoxes.addEventListener('click', boxChange);

出典

2016-04-09 Anonymous

'addEventListener'はNodeListではなく、要素上で利用可能であり、' blackBoxes'はNodeListであり、要素ではありません。したがって、NodeListを反復処理し、その内部の各要素に対して 'addEventListener'を使用します。 – GillesC

ところで、あなたのループは144ボックスを作るつもりです。 0で始まるか、i <= 145になります。 – NOBrien

問題はblackBoxesはDOM要素の集合であるということですので、あなたがそのセットして使用ものの繰り返す必要があります各DOM要素の個別のaddEventListener：

Array.from(blackBoxes).forEach(function(blackBox) { 
    blackBox.addEventListener('click', boxChange); 
});

の作業フィドル：blackBoxesはDOM要素の「セット」であっても、それは本当のアレイではないのでhttps://jsfiddle.net/od9md4y8/

Array.from()が必要です。は、blackBoxesの要素から作られた真の配列を返します。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from

しかし、より良い方法がこれを行うがあります：あなたはそれを作成するときに要素にイベントリスナーを追加します！ every boxにclick listenerを追加することとは対照的に

if(i%5 === 0){ 
    repeatSq.style.backgroundColor = "white"; 
    repeatSq.style.border = "solid white 5px"; 
    repeatSq.className = "white"; 
} 
else { 
    repeatSq.addEventListener('click', boxChange); 
}

https://jsfiddle.net/od9md4y8/1/

出典

2016-04-09 18:54:15 scott113341

2番目の部分は、私が探していたものです。 –

、また、あなたのwrapper要素に1を追加することができます。

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById('wrapper').addEventListener('click', function (evt) { 
     console.log(evt); 
    }); 
});

各click eventは、あなたがどの判断するために使用できる特定の値が付属していますボックスがクリックされました。この場合、evt.targetはクリックされた要素を提供します。

この機能を使用して、どの色を追加または削除するかを決定できます。

出典

2016-04-09 19:02:24 Matthijs

何か関数ではありませんが、それが見つからないというエラーが引き続き発生します

答えて

関連する問題