Saya baru mengenal javascript dan sedang belajar array dan loop. Saya sedang menulis beberapa kode dasar untuk mengubah kelas beberapa paragraf, tetapi saya tidak dapat melakukannya. Adakah yang bisa memberi tahu saya apa yang saya lakukan salah di dalamnya?

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>

Ternyata beberapa paragraf berubah dan beberapa tidak ada yang bisa mengatakan apa yang saya lakukan salah?

2
Deekshant 26 Oktober 2019, 23:55

1 menjawab

Jawaban Terbaik

document.getElementsByClassName() adalah koleksi langsung yang berarti saat Anda mengulang elemen dan mengubah kelas, Anda mengubah koleksi. Hampir selalu merupakan ide yang buruk untuk mengubah keanggotaan koleksi saat Anda mengulanginya. Ini membuat indeks Anda menunjuk ke elemen yang salah. Solusi termudah adalah menggunakan querySelectorAll() sebagai gantinya.

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 Oktober 2019, 21:03