Javascript problemi: Div'in üzerinde gezerken rastgele başlık rengini renk dizisinden nasıl değiştirebilirim?

Bir okul projesi üzerinde çalışıyorum ve şu küçük sorunla karşılaştım:

Bir div (sınıf .projects ile) üzerine geldiğinde, rastgele seçilen bir diziden üç renkten birinin başlığının (h1) değişmesini istiyorum.

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

Şimdiden teşekkürler!

0
Sorunun ne olduğunu açıklamamışsın.
katma yazar David Thomas, kaynak
Sorunun ne olduğunu açıklamamışsın.
katma yazar David Thomas, kaynak

8 cevap

Diğer cevaplarda da belirtildiği gibi, getElementsByTagName , dizi benzeri bir yapı döndürür. Stil özelliğini değiştirmek için belirli bir öğeyi çıkarmanız gerekir.

İlgili bölümün üzerine her fare tıklattığınızda rengi değiştirmek istediğinizi varsayarsak, mouseover olayı için olay işleyicisini Math.random içinde yapmanız gerekir. Aksi halde, senaryo ilk değerlendirildiğinde ve sonra hiç değişmediğinde, yalnızca bir kez hesaplanır.

hepsini h1 'in rengini değiştirmek isteyebileceğiniz fikrinize göre (aksi halde getElementsByTagName , querySelector ) Her bir h1 etiketi için belirlenmiş olan rasgele renkle birlikte bir forEach ekledim.

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

Diğer cevaplarda da belirtildiği gibi, getElementsByTagName , dizi benzeri bir yapı döndürür. Stil özelliğini değiştirmek için belirli bir öğeyi çıkarmanız gerekir.

İlgili bölümün üzerine her fare tıklattığınızda rengi değiştirmek istediğinizi varsayarsak, mouseover olayı için olay işleyicisini Math.random içinde yapmanız gerekir. Aksi halde, senaryo ilk değerlendirildiğinde ve sonra hiç değişmediğinde, yalnızca bir kez hesaplanır.

hepsini h1 'in rengini değiştirmek isteyebileceğiniz fikrinize göre (aksi halde getElementsByTagName , querySelector ) Her bir h1 etiketi için belirlenmiş olan rasgele renkle birlikte bir forEach ekledim.

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

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
katma

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
katma

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.

Bunun, yalnızca bir kez rengi listeden önceden seçilmiş bir renge değiştireceğini unutmayın; İstenilen davranış olup olmadığı ya da farenin üzerine getirildiğinde her zaman değiştirmek istediğinizde net değilim.

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

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.

Bunun, yalnızca bir kez rengi listeden önceden seçilmiş bir renge değiştireceğini unutmayın; İstenilen davranış olup olmadığı ya da farenin üzerine getirildiğinde her zaman değiştirmek istediğinizde net değilim.

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

Sadece document.getElementsByTagName ("h1") kodunu document.getElementsByTagName ("h1") [0] olarak değiştirin.

Çünkü, getElementsByTagName seçicisi, koleksiyonun tüm koleksiyonda desteklememesi için kodun neden çalışmadığını belirten bir koleksiyon döndürür.

0
katma

Sadece document.getElementsByTagName ("h1") kodunu document.getElementsByTagName ("h1") [0] olarak değiştirin.

Çünkü, getElementsByTagName seçicisi, koleksiyonun tüm koleksiyonda desteklememesi için kodun neden çalışmadığını belirten bir koleksiyon döndürür.

0
katma