Apabila saya menjalankannya butang tidak melakukan apa yang sepatutnya

Question

Saya tidak tahu mengapa butang tidak berfungsi. Apa yang saya mahu lakukan ialah setiap Pokémon yang mempunyai kotak "terperangkap" tidak lagi muncul apabila saya mengklik butang itu. Ia tidak berfungsi. Saya baru sahaja memulakan pengekodan, dan semasa anda membaca ini, anda mungkin tersenyum. Semuanya sangat mengelirukan.

function showUnowned() {
  var rows = document.getElementsByTagName("tr");
  for (var i = 0; i < rows.length; i++) {
    if (rows[i].getElementsByTagName("input")[2].checked == true) {
      rows[i].style.display = "none";
    }
  }
}

<h1>My Pokemon Card Collection</h1>
<table>
  <tr>
    <th>Picture</th>
    <th>Name</th>
    <th>Pokedex Number</th>
    <th>Card</th>
    <th>Other</th>
  </tr>
  <!-- This is an example of how to add a Pokemon to the table. You can copy and paste this code for each Pokemon in your collection. -->
  <tr>
    <td><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"></td>
    <td>Bulbasaur</td>
    <td>1</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/2.png"></td>
    <td>Ivysaur</td>
    <td>2</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/3.png"></td>
    <td>Venusaur</td>
    <td>3</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png"></td>
    <td>Charmander</td>
    <td>4</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>



</table>
<button onclick="showUnowned()">Show Unowned Pokemon</button>

Answer 1

Anda menggelung elemen sekali lagi (terdapat 4 elemen, tetapi anda menggelung 5 kali), jadi anda boleh mengedit kod anda untuk membetulkan perkara ini:

function showUnowned() {
  var rows = document.getElementsByTagName("tr");
  for (var i = 1; i < rows.length; i++) {
    if (rows[i].getElementsByTagName("input")[2].checked == true) {
      rows[i].style.display = "none";
    }
  }
}