當我運行它時，按鈕沒有執行應有的操作

Question

我不知道為什麼按鈕不起作用。我想要做的是，當我單擊按鈕時，每個選中“卡”框的神奇寶貝不再出現。它不起作用。我剛開始編碼，當你讀到這篇文章時，你可能會微笑。這一切都非常令人困惑。

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

您再次循環遍歷這些元素（有 4 個元素，但循環了 5 次），因此您可以編輯程式碼來解決此問題：

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";
    }
  }
}