javascript - Cannot read property 'getElementById' of undefined

Question

I have this function to do a filter by jquery, and it is returning this error:

Cannot read property 'getElementById' of undefined

 function VerificaCheck() { 
    var input, filter, table, tr, td, i, filtro;
    input = document.getElementById("busca2");
    filter = input.value.toUpperCase();
    table = document.getElementById("tablepesquisa2");
    tr = table.getElementsByTagName("tr");
    filtro = document.getElementById("filtroPesquisa2").value;
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[filtro];
        var tipoProduto = tr[i].getElementById("tipoProduto").value;
        if (td) {
            if (tipoProduto == $('#Produtos').prop("checked")) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
}

This is the HTML of my table, and the checkbox. If the checkbox is checked it should look for in the table the fields of typeProduct that are true

 <div class="form-group">
                    <div class="col-sm-3">
                        <select id="filtroPesquisa2" class="form-control">
                            <option value="0">Código</option>
                            <option value="1">Descri??o</option>
                        </select>
                    </div>
                    <div class="col-sm-7">
                        <input type="text" id="busca2" placeholder="Pesquisa.." onkeyup="myFunction2();" class="form-control" />
                    </div>
                </div>
                <div class="modal-body">
                    <div class="table-overflow col-sm-12">
                        <table class="table table-responsive table-hover" id="tablepesquisa2">
                            <thead>
                                <tr>
                                    <th>Código</th>
                                    <th>Nome</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var item in Model.Produto)
                                {
                                <tr>
                                    <td>@item.Codigo</td>
                                    <td>@item.nome</td>
                                    <td align="right">
                                        <a href="#" onclick="fecha2();CarregaProduto('@item.Codigo');" title="Selecionar"><i class="fa fa-check-circle fa-lg"></i></a>&nbsp;
                                    </td>
                                    <td id="tipoProduto" value="@item.TipoProduto">@item.TipoProduto</td>
                                </tr>
                                }

                            </tbody>
                        </table>
                    </div>
                </div>

<input type="checkbox" asp-for="Produtos" onclick="checkProduto();" name="Produtos" id="Produtos"/>

Answer 1

getElementById is available on the document, not on tr.

Documentation

change the following line to

var tipoProduto = document.getElementById("tipoProduto").value;

However, this may not get what you want, based on my guesses that you have multiple elements by this id in your table. Post your html and what you are trying to do, may be there's another way to do this.

UPDATE:

As suspected, your td repeats in the loop, so you multiple td with same id. I'd suggest to remove id from it. Since the value you are looking is the last td, what you can possibly do to get the value you are looking for is (one way that is):

td[td.length-1].innerHTML

So the loop would look more like:

for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[filtro];

        if (td) {
            var tipoProduto = td[td.length-1].innerHtml;

            if (tipoProduto == $('#Produtos').prop("checked")) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }