1
作成した配列のすべての項目に適用するイベントリスナーを取得できません。私はここで他の多くの関連記事を見てきましたが、私の正確な状況をカバーするものはありません。Javascript - 配列のすべての項目にイベントリスナーを追加する
私はコンソールにログアウトしていて、各繰り返しのポップアップを見ることができるので、forループが動作していることは知っています。コンソール上では、イベントリスナーが各反復に適用されていることがわかりますが、実際にページ上の要素にマウスを重ねると起動しません。
私が紛失している可能性のある手がかりは？完全なコードは以下の通りです。
<head>
<title>Test Page</title>
</head>
<style>
.red-text {
color: red;
font-size: 75px;
transition: 4s;
font-family: Times;
}
.new-header {
color: blue;
font-size: 100px;
transition: 3s;
font-style: bold;
}
</style>
<body>
<h1>Welcome</h1>
<p>This is the first paragraph</p>
<p>Here is the second paragraph</p>
<p>And this is the final paragraph</p>
<script>
var h = document.querySelector("h1");
var p = document.querySelectorAll("p");
var changeHeader = function() {
h.className = h.className + " new-header";
}
var addRedClass = function() {
p.className = p.className + " red-text";
}
h.addEventListener("mouseover", changeHeader);
for(var i = 0; i < p.length; i += 1) {
console.log(p[i]);
p[i].addEventListener("mouseover", addRedClass);
}
</script>
</body>
再び、アレイ内の各要素は、標的とされている、私は、リスナーが適用されていることを確認することができ、それは、マウスの上に発射しないであろう。
アドバイスを事前にいただきありがとうございます。
'p'は、おそらくマウスオーバーされることを可能にするDOMのCSSを介した次元を持たないかもしれません。 – staypuftman