मेरे पास एक जेएस स्क्रिप्ट है जो हर बार पृष्ठ को रीफ्रेश करने पर 3 टैग के पृष्ठभूमि रंग को बदल देती है। समस्या यह है कि यह केवल 3 में से एक टैग पर पृष्ठभूमि का रंग बदलता है।

function random_bg_color() {
    var x = Math.floor(Math.random() * 256);
    var y = Math.floor(Math.random() * 256);
    var z = Math.floor(Math.random() * 256);
    var bgColor = "rgb(" + x + "," + y + "," + z + ")";
 console.log(bgColor);

    document.getElementById("rand-c").style.background = bgColor;
    document.getElementById("rand-c").style.border = bgColor;
    }

random_bg_color();
a {
  color: #000;
  border: 2px solid;
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: 4px;
  margin-right: 4px;
  text-decoration: none;
}
<a href="" id="rand-c">1st tag</a>
<a href="" id="rand-c">2nd tag</a>
<a href="" id="rand-c">3rd tag</a>
0
Apost 2 अप्रैल 2018, 12:37

5 जवाब

सबसे बढ़िया उत्तर

आप id के बजाय class का उपयोग कर सकते हैं और फिर getElementsByClassName("rand-c") का उपयोग करके लक्ष्य तत्व प्राप्त कर सकते हैं। यह आपको पूरा सेट देगा और उन्हें नीचे की तरह शैलियों को लागू करने के लिए इसे लूप करने की आवश्यकता होगी।

function random_bg_color() { 
    var i;
    var arr = document.getElementsByClassName("rand-c");
    for (i = 0; i < arr.length; i++) {
      var x = Math.floor(Math.random() * 256);
      var y = Math.floor(Math.random() * 256);
      var z = Math.floor(Math.random() * 256);
      var bgColor = "rgb(" + x + "," + y + "," + z + ")";
      arr[i].style.backgroundColor = bgColor;
      arr[i].style.border = bgColor;
   }
 }

random_bg_color();
a {
  color: #fff;
  border: 2px solid;
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;
  margin-left: 4px;
  margin-right: 4px;
  text-decoration: none;
}
<a href="" class="rand-c">1st tag</a>
<a href="" class="rand-c">2nd tag</a>
<a href="" class="rand-c">3rd tag</a>
1
Suresh Ponnukalai 2 अप्रैल 2018, 09:50

आपके एचटीएमएल कोड में त्रुटि है, आईडी दोहराना नहीं है

0
D dancel 2 अप्रैल 2018, 10:05

आम तौर पर, पूरे डोम में आईडी अद्वितीय होनी चाहिए। जैसा कि @Lece ने ऊपर संकेत दिया है, getElementById() डिफ़ॉल्ट रूप से पहला मिलान तत्व लौटाएगा। मेरा सुझाव है कि आप कक्षा का उपयोग करें, फिर getElementByClassName का उपयोग करें और स्टाइल सेट करें।

0
Nie Selam 2 अप्रैल 2018, 09:57

एंकर टैग में एक विशेषता के रूप में आईडी के बजाय वर्ग का उपयोग करें। क्योंकि, आईडी केवल पहले टैग को संदर्भित करता है, यह एक विशिष्ट पहचानकर्ता है। तो कक्षा का उपयोग करें

0
Dineshprabu S 2 अप्रैल 2018, 09:54

getElementById() पहला तत्व लौटाता है। इसके बजाय document.querySelectorAll() का प्रयोग करें और परिणामों पर पुनरावृति करें। जैसे कि;

var tags = document.querySelectorAll("#rand-c");

for (i = 0; i < tags.length; i++)
{ 
    tags[i].style.background = bgColor;
}
2
Lece 2 अप्रैल 2018, 09:48