Javascriptの問題：divの上にマウスを移動したときに、ランダムな見出しの色を配列の色から変更するにはどうすればよいですか。

Question

Javascriptの問題：divの上にマウスを移動したときに、ランダムな見出しの色を配列の色から変更するにはどうすればよいですか。

私は学校のプロジェクトに取り組んでいて、この小さな問題につまずいた。

div（クラス.projects）の上にマウスを移動すると、タイトル（h1）totが配列から3色のうちの1色に変わり、ランダムに選択されます。

`Some title`

<div class="project"></div>



var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
var randomColor = colors[Math.floor(Math.random()*colors.length)];


document.querySelector(".project").addEventListener("mouseover", function(){
  var title = document.getElementsByTagName("h1");
  title.style.color = randomColor;
});

My code in codepen: https://codepen.io/BoLeynen/pen/XogLPy?editors=1010

前もって感謝します！

0

追加された 26 12月 2018 〜で 05:12 著者 bok

ビュー: 6

源

ro nl ru fr es pt de zh hi bn ar kk uz be tr uk

あなたは何が問題なのか説明していません。

追加された 26 12月 2018 〜で 05:23, 著者 David Thomas, 源

あなたは何が問題なのか説明していません。

追加された 26 12月 2018 〜で 05:23, 著者 David Thomas, 源

8 答え

著者 dgeare · Answer 1 · 2018-12-26T05:31Z

他の回答で指摘されているように、あなたは getElementsByTagName は配列のような構造を返します。そのstyleプロパティを操作するには、特定の要素を抽出する必要があります。

関連するセクションの上にマウスを移動するたびに色を変更するということを考えているなら、mouseoverイベントのイベントハンドラを Math.random 内部する必要があります。それ以外の場合は、スクリプトが最初に評価されてから変更されることがないときに1回だけ計算されます。

all h1 の色を変更することを意図しているかもしれません（そうでなければ getElementsByTagName は既に querySelector ）各 h1 タグに対してランダムな色が決定された forEach を追加しました。

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>

著者 dgeare · Answer 2 · 2018-12-26T05:31Z

他の回答で指摘されているように、あなたは getElementsByTagName は配列のような構造を返します。そのstyleプロパティを操作するには、特定の要素を抽出する必要があります。

関連するセクションの上にマウスを移動するたびに色を変更するということを考えているなら、mouseoverイベントのイベントハンドラを Math.random 内部する必要があります。それ以外の場合は、スクリプトが最初に評価されてから変更されることがないときに1回だけ計算されます。

all h1 の色を変更することを意図しているかもしれません（そうでなければ getElementsByTagName は既に querySelector ）各 h1 タグに対してランダムな色が決定された forEach を追加しました。

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>

著者 brk · Answer 3 · 2018-12-26T05:18Z

Since div is empty so not sure where to hover. Secondly getElementsByTagName return a list so you need to get the element by passing the index & then get the randomColor inside the mouseover callback

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
document.querySelector(".project").addEventListener("mouseover", function() {
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  var title = document.getElementsByTagName("h1")[0];
  title.style.color = randomColor;
});

`Some title`

<div class="project">hover here</div>

</div> </div>

著者 brk · Answer 4 · 2018-12-26T05:18Z

Since div is empty so not sure where to hover. Secondly getElementsByTagName return a list so you need to get the element by passing the index & then get the randomColor inside the mouseover callback

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
document.querySelector(".project").addEventListener("mouseover", function() {
  var randomColor = colors[Math.floor(Math.random() * colors.length)];
  var title = document.getElementsByTagName("h1")[0];
  title.style.color = randomColor;
});

`Some title`

<div class="project">hover here</div>

</div> </div>

著者 nvioli · Answer 5 · 2018-12-26T05:19Z

document.getElementsByTagName returns an array; i.e. it returns all elements with that tagname (the name hints this by using the plural Elements). Since you want to change the style property of just one element (i.e. the first one), the easiest thing to do is to add [0] when assigning the title variable.

これは一度だけ色をリストから選択された色に変えるだけであることに注意してください。それが望ましい振る舞いなのか、それともマウスがホバーされるたびにそれを変更したいのか、私にはわかりません。

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
var randomColor = colors[Math.floor(Math.random()*colors.length)];

document.querySelector(".project").addEventListener("mouseover", function(){
  var title = document.getElementsByTagName("h1")[0];
  title.style.color = randomColor;
});

.project{background:red;height:100px;width:100px}

`Some title`

<div class="project"></div>

</div> </div>

著者 nvioli · Answer 6 · 2018-12-26T05:19Z

document.getElementsByTagName returns an array; i.e. it returns all elements with that tagname (the name hints this by using the plural Elements). Since you want to change the style property of just one element (i.e. the first one), the easiest thing to do is to add [0] when assigning the title variable.

これは一度だけ色をリストから選択された色に変えるだけであることに注意してください。それが望ましい振る舞いなのか、それともマウスがホバーされるたびにそれを変更したいのか、私にはわかりません。

var colors = ["#F4A381", "#01ABA9", "#ffdc40"];
var randomColor = colors[Math.floor(Math.random()*colors.length)];

document.querySelector(".project").addEventListener("mouseover", function(){
  var title = document.getElementsByTagName("h1")[0];
  title.style.color = randomColor;
});

.project{background:red;height:100px;width:100px}

`Some title`

<div class="project"></div>

</div> </div>

著者 Jitendra · Answer 7 · 2018-12-26T05:21Z

コード document.getElementsByTagName（ "h1"）を document.getElementsByTagName（ "h1"）[0] に置き換えるだけです。

なぜなら、 getElementsByTagName セレクタはコレクションを返すので、コレクション全体でスタイルがサポートされていないため、コードが機能しないのです。

著者 Jitendra · Answer 8 · 2018-12-26T05:21Z

コード document.getElementsByTagName（ "h1"）を document.getElementsByTagName（ "h1"）[0] に置き換えるだけです。

なぜなら、 getElementsByTagName セレクタはコレクションを返すので、コレクション全体でスタイルがサポートされていないため、コードが機能しないのです。