他の回答で指摘されているように、あなたは getElementsByTagName
は配列のような構造を返します。そのstyleプロパティを操作するには、特定の要素を抽出する必要があります。
関連するセクションの上にマウスを移動するたびに色を変更するということを考えているなら、mouseoverイベントのイベントハンドラを Math.random
内部する必要があります。それ以外の場合は、スクリプトが最初に評価されてから変更されることがないときに1回だけ計算されます。
all h1
の色を変更することを意図しているかもしれません(そうでなければ getElementsByTagName
は既に querySelector
)各 h1
タグに対してランダムな色が決定された forEach
を追加しました。
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
document.querySelector(".project").addEventListener("mouseover", function(){
var titles = Array.from(document.getElementsByTagName("h1"));
titles.forEach(function(title){
var randomColor = colors[Math.floor(Math.random()*colors.length)];
title.style.color = randomColor;
});
});
.project{
width: 200px;
height: 200px;
background-color: pink;
}
Some title
<!--This should change color,,-->
<div class="project"></div>
<!--when hovering over this div. -->
</div>
</div>