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
あなたは何が問題なのか説明していません。
追加された 著者 David Thomas,
あなたは何が問題なのか説明していません。
追加された 著者 David Thomas,

8 答え

他の回答で指摘されているように、あなたは 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>

0
追加された

他の回答で指摘されているように、あなたは 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>

0
追加された

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

<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 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>

0
追加された

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

<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 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>

0
追加された

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.

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>

0
追加された

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.

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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>

0
追加された

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

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

0
追加された

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

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

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript