जावास्क्रिप्ट समस्या: मैं div पर मंडराते समय रंगों के शीर्ष से यादृच्छिक रंग कैसे बदल सकता हूँ?

मैं एक स्कूल परियोजना पर काम कर रहा हूँ और इस छोटे से मुद्दे पर ठोकर खाई है:

जब एक div (वर्ग .projects के साथ) पर मँडराता है, तो मैं चाहता हूं कि शीर्षक (h1) एक सरणी से तीन रंगों में से एक में बदल जाए, यादृच्छिक रूप से चुना गया।

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 एक सरणी जैसी संरचना देता है। इसकी शैली की संपत्ति में हेरफेर करने के लिए आपको एक विशिष्ट तत्व निकालने की आवश्यकता है।

माना जाता है कि जब आप संबंधित अनुभाग पर माउस को हर बार रंग बदलते हैं, तो आपको अपना Math.random अंदर माउसओवर इवेंट के लिए ईवेंट हैंडलर करना होगा। अन्यथा यह केवल एक बार गणना की जाएगी, जब स्क्रिप्ट पहले मूल्यांकन करती है और फिर कभी नहीं बदलती है।

इस विचार पर कि आप सभी h1 का रंग बदल सकते हैं (अन्यथा getElementsByTagName एक अजीब समावेशन लगता है क्योंकि आपने पहले ही इस कोड का प्रदर्शन किया है। > querySelector ) मैंने अभी एक forEach जोड़ा है जिसमें प्रत्येक h1 टैग के लिए यादृच्छिक रंग निर्धारित किया गया है।

<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 एक सरणी जैसी संरचना देता है। इसकी शैली की संपत्ति में हेरफेर करने के लिए आपको एक विशिष्ट तत्व निकालने की आवश्यकता है।

माना जाता है कि जब आप संबंधित अनुभाग पर माउस को हर बार रंग बदलते हैं, तो आपको अपना Math.random अंदर माउसओवर इवेंट के लिए ईवेंट हैंडलर करना होगा। अन्यथा यह केवल एक बार गणना की जाएगी, जब स्क्रिप्ट पहले मूल्यांकन करती है और फिर कभी नहीं बदलती है।

इस विचार पर कि आप सभी h1 का रंग बदल सकते हैं (अन्यथा getElementsByTagName एक अजीब समावेशन लगता है क्योंकि आपने पहले ही इस कोड का प्रदर्शन किया है। > querySelector ) मैंने अभी एक forEach जोड़ा है जिसमें प्रत्येक h1 टैग के लिए यादृच्छिक रंग निर्धारित किया गया है।

<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
जोड़ा