मैं जावास्क्रिप्ट के लिए नया हूँ और सरणियाँ और लूप सीख रहा हूँ। मैं कुछ अनुच्छेदों की कक्षाओं को बदलने के लिए कुछ बुनियादी कोड लिख रहा था, लेकिन ऐसा करने में असमर्थ हूं। क्या कोई मुझे बता सकता है कि मैं इसमें क्या गलत कर रहा हूँ?

function change() {
  var x = document.getElementsByClassName('a');
  x[0].className = 'b';
  for (var y = 0; y < x.length; y++) {
    console.log(x[y]);
    x[y].className = "b";
  }
}
p.a {
  font-size: 2em;
  color: red;
  text-align: center;
}

p.b {
  font-size: 1em;
  color: green;
  text-align: center;
}
<p class='a'>a</p>
<p class='a'> b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>

<button onclick="change()">Change</button>

जैसा कि यह पता चला है कि कुछ पैराग्राफ बदल रहे हैं और कुछ नहीं हैं क्या कोई बता सकता है कि मैं क्या गलत कर रहा हूं?

2
Deekshant 26 अक्टूबर 2019, 23:55

1 उत्तर

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

document.getElementsByClassName() एक लाइव संग्रह है, जिसका मतलब है कि जैसे ही आप तत्वों के माध्यम से लूप करते हैं और उस वर्ग को बदलते हैं जिसे आप संग्रह बदल रहे हैं। जब आप किसी संग्रह पर पुनरावृति करते हैं तो उसकी सदस्यता को बदलना लगभग हमेशा एक बुरा विचार होता है। यह आपकी अनुक्रमणिका को गलत तत्वों की ओर इशारा करता है। इसके बजाय querySelectorAll() का उपयोग करना सबसे आसान उपाय है।

function change() {
  var x = document.querySelectorAll('.a');
  for (var y = 0; y < x.length; y++) {
    x[y].className = "b";
  }
}
p.a {
  font-size: 2em;
  color: red;
  text-align: center;
}

p.b {
  font-size: 1em;
  color: green;
  text-align: center;
}
<p class='a'>a</p>
<p class='a'> b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>
<p class='a'>a</p>
<p class='a'>b</p>
<p class='a'>c</p>

<button onclick="change()">Change</button>
3
Mark 26 अक्टूबर 2019, 21:03