জাভাস্ক্রিপ্ট সমস্যা: আমি ডিভির উপর হোলিং যখন রং অ্যারে থেকে শিরোনাম র্যান্ডম রঙ পরিবর্তন করতে পারি?

আমি একটি স্কুলে প্রকল্পে কাজ করছি এবং এই ছোট্ট সমস্যাটির উপর চাপা পড়েছি:

যখন একটি div (ক্লাসে। প্রজেক্টস সহ) উপর হভারিং করা হয়, তখন আমি শিরোনাম (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 একটি বিরাট অন্তর্ভুক্তি বলে মনে হচ্ছে যেহেতু আপনি ইতিমধ্যে query selector ) আমি প্রতিটি 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 একটি বিরাট অন্তর্ভুক্তি বলে মনে হচ্ছে যেহেতু আপনি ইতিমধ্যে query selector ) আমি প্রতিটি 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.

নোট করুন যে এই তালিকা থেকে পূর্বনির্ধারিত রঙে শুধুমাত্র একবার রঙ পরিবর্তন করবে; আমি স্পষ্ট যে এটি পছন্দসই আচরণ বা যদি আপনি মাউস hovered হয় প্রতিবার এটি পরিবর্তন করতে চান।

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

নোট করুন যে এই তালিকা থেকে পূর্বনির্ধারিত রঙে শুধুমাত্র একবার রঙ পরিবর্তন করবে; আমি স্পষ্ট যে এটি পছন্দসই আচরণ বা যদি আপনি মাউস hovered হয় প্রতিবার এটি পরিবর্তন করতে চান।

<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
যোগ