Javascript muammolari: Div-dan o'tib ketayotganda rulmaning tasodifiy rangi ranglarning qatoridan qanday o'zgartirish mumkin?

Maktab loyihasi ustida ishlayapman va bu kichik masalani qoqintiraman:

Agar div (float .projects) bilan harakat qilsangiz, nom (h1) totni tasodifiy tanlab olingan qatordan uchta rangga o'zgartirilishini istayman.

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

Oldindan rahmat!

0
Muammo nima ekanligini tushuntirmadingiz.
qo'shib qo'ydi muallif David Thomas, manba
Muammo nima ekanligini tushuntirmadingiz.
qo'shib qo'ydi muallif David Thomas, manba

8 javoblar

Boshqa javoblar ko'rsatganidek, siz getElementsByTagName qator o'xshash tuzilishini qaytaradi. Uning uslubi xususiyatini o'zgartirish uchun muayyan elementni ajratib olishingiz kerak.

Siz tegishli bo'limga sichqonchani sichqonchaning har bir qismida sichqonni o'zgartirishni nazarda tutmoqchisiz, sichqoncha hodisasi uchun voqea işleyicisini Math.random ichida qilishingiz kerak. Aks holda, bu faqat bir marta, skript avval baholagan va keyin hech qachon o'zgartirilganda hisoblanmaydi.

barcha h1 ning rangini o'zgartirishi mumkin degan fikrda (aks holda getElementsByTagName ) siz allaqachon ko'rsatganingizdek, > querySelector ), har bir h1 yorlig'i uchun belgilangan tasodifiy rang bilan birga forEach qo'shdik.

<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
qo'shib qo'ydi

Boshqa javoblar ko'rsatganidek, siz getElementsByTagName qator o'xshash tuzilishini qaytaradi. Uning uslubi xususiyatini o'zgartirish uchun muayyan elementni ajratib olishingiz kerak.

Siz tegishli bo'limga sichqonchani sichqonchaning har bir qismida sichqonni o'zgartirishni nazarda tutmoqchisiz, sichqoncha hodisasi uchun voqea işleyicisini Math.random ichida qilishingiz kerak. Aks holda, bu faqat bir marta, skript avval baholagan va keyin hech qachon o'zgartirilganda hisoblanmaydi.

barcha h1 ning rangini o'zgartirishi mumkin degan fikrda (aks holda getElementsByTagName ) siz allaqachon ko'rsatganingizdek, > querySelector ), har bir h1 yorlig'i uchun belgilangan tasodifiy rang bilan birga forEach qo'shdik.

<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
qo'shib qo'ydi

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
qo'shib qo'ydi

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
qo'shib qo'ydi

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.

Shuni esda tutingki, bu rangni faqat bir marta o'zgartiradi; Men xohlagan xatti-harakatim bormi yoki sichqoncha har safar siltangni o'zgartirishni xohlamadim.

<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
qo'shib qo'ydi

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.

Shuni esda tutingki, bu rangni faqat bir marta o'zgartiradi; Men xohlagan xatti-harakatim bormi yoki sichqoncha har safar siltangni o'zgartirishni xohlamadim.

<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
qo'shib qo'ydi

Faqat document.getElementsByTagName ("h1") kodini document.getElementsByTagName ("h1") [0] kodiga o'zgartiring.

Chunki, getElementsByTagName selektori to'plamni qaytaradi, shuning uchun uslub butun koleksiyada qo'llab-quvvatlanmaydi, shuning uchun kodingiz ishlamaydi.

0
qo'shib qo'ydi

Faqat document.getElementsByTagName ("h1") kodini document.getElementsByTagName ("h1") [0] kodiga o'zgartiring.

Chunki, getElementsByTagName selektori to'plamni qaytaradi, shuning uchun uslub butun koleksiyada qo'llab-quvvatlanmaydi, shuning uchun kodingiz ishlamaydi.

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb