Question 184138 in Html Question posted in
Some basic documentation can be found here.

Html – When I run it the button doesn't do what It should

I don’t know why the button doesn’t work. What I want to do is that every Pokémon which "card" box is checked doesn’t appear anymore when I click the button. and it does not work. I just started to code and you might smile while you read this. Its just all very confusing.

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>
Tags:

2

Answers


  1. 0

    You are looping through the elements one more time (there are 4 elements but it loops 5 times), so you can edit your code to fix this :

    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";
    }
  }
}
    Login or Signup to reply.
  2. 0

    Welcome to coding 🙂

    I’ll walk you through how you can resolve this.

    Step 1: Open some diagnostic tools.
    In this case, you can use the browser’s console. Hit F12, Ctrl+Shift+I, or google how to open the developer tools for your browser. Once you’ve got the console open, perform the action that is giving you an issue.

    In your case here, I saw the following error when clicking the button: Uncaught TypeError: Cannot read properties of undefined (reading 'checked')

    So, at some point in your code, the query you’re using to find the input element is returning undefined. Basically, what you’re expecting to find isn’t there.

    Step 2: Deeper debugging
    Inside the developer tools you can click on the error and it will jump to the part of your code where the error is happening:
    enter image description here

    Set a breakpoint, run through the problem again and you’ll be able to take a deeper look into what is happening when the error happens. IT’s like being able to look into your code live while it is running. I’ll leave you to google the finer parts of how to use a debugger.

    Step 3: Find the issue
    In your case, I saw that you were querying for an input element, but it doesn’t exist in your first tr. So, on the first pass the query returns undefined and causes the error.

    The fix
    For this case I would recommend a simple check to ensure that the element exists before seeing if it is checked:

        for (let i = 0; i < rows.length; i++) {
        const unownedCheckbox = rows[i].getElementsByTagName("input")[1] // changed this to index of 1 as there is no third checkbox

        if (!unownedCheckbox) continue

        if (unownedCheckbox.checked) {
            rows[i].style.display = "none";
        }
    }

    With the check in place to ensure we have an element, we can safely call the .checked method. For more concise code, you can also use optional chaining:

            if (unownedCheckbox?.checked) {
            rows[i].style.display = "none";
        }

    Cheers!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search