How can i get my Javascript function to work on a partial html page?

Question

I have a partial HTML page that includes a search button and a table, and i want my search button to show only the results that match in the table by using keyup. Unfortunately, i inherited this project and the page that performs the search is a partial, and i can't get my JavaScript function to work with it. I've already put a src line on the main page, but once i try to insert letters into my search bar i get the following error:

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
at myFunction (myFunction.js:11)
at HTMLInputElement.onkeyup ((index):1)

How can i solve this?

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("searchtable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<div class="col-xs-2 no-print" ng-include="'partials/gestioneAccessi/menuGestioneAccessi.html'"></div>
<div class="col-xs-10" style="float: right;">
  <div class="col-xs-11">
    <h3 id="title_name">Cerca</h3>
  </div>
  <br>
  <!--            <div class ="form-group pull-right"> 
                    <i class="glyphicon glyphicon-search pull-left">:</i>
                    <input type="search" class="text-area"  />
            </div>-->

  <!--        <div class="col-xs-11"><form>
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="fa fa-search">Invio</i></button>
            </form>
            </div>
        </div>-->
  <br>
  <br>
  <div id="usersTable_wrapper" class="dataTables_wrapper no-footer">
    <div>
      <fieldset class="cornice-tabelle">
        <!--                <label>
                                    Cerca 
                                <span class="glyphicon glyphicon-search pull-left">:</span>
                                <input type="search" class="usertable"/>-->
        <div id="usersTable_filter" class="dataTables_filter"><label>Cerca <span class="glyphicon glyphicon-search" ></span>: <input type="search" id="myInput" onkeyup="myFunction()"></label>
          <br>
          <br>

        </div>
        <table id="searchTable" class="table table-striped table-bordered " data-sort-name="date">
          <thead>
            <tr id="tr">

              <th>Username</th>
              <th>Ruolo</th>

              <th>Data Creazione</th>
              <th>Data Disabilitazione</th>

            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="user in users" ng-class-odd="'odd'" ng-class-even="'even'">

              <td>{{user.username}}</td>
              <td>{{user.ruolo}}</td>
              <td style="text-align: center">{{user.dataCreazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>
              <td style="text-align: center" ng-value="$last && caricaPaginazione('usersTable','0','asc')">{{user.dataDisabilitazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>

            </tr>
          </tbody>
        </table>



      </fieldset>
    </div>
  </div>

Answer 1

Change

table = document.getElementById("searchtable");

to (T uppercase)

table = document.getElementById("searchTable");

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("searchTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<div class="col-xs-2 no-print" ng-include="'partials/gestioneAccessi/menuGestioneAccessi.html'"></div>
<div class="col-xs-10" style="float: right;">
  <div class="col-xs-11">
    <h3 id="title_name">Cerca</h3>
  </div>
  <br>
  <!--            <div class ="form-group pull-right"> 
                    <i class="glyphicon glyphicon-search pull-left">:</i>
                    <input type="search" class="text-area"  />
            </div>-->

  <!--        <div class="col-xs-11"><form>
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="fa fa-search">Invio</i></button>
            </form>
            </div>
        </div>-->
  <br>
  <br>
  <div id="usersTable_wrapper" class="dataTables_wrapper no-footer">
    <div>
      <fieldset class="cornice-tabelle">
        <!--                <label>
                                    Cerca 
                                <span class="glyphicon glyphicon-search pull-left">:</span>
                                <input type="search" class="usertable"/>-->
        <div id="usersTable_filter" class="dataTables_filter"><label>Cerca <span class="glyphicon glyphicon-search" ></span>: <input type="search" id="myInput" onkeyup="myFunction()"></label>
          <br>
          <br>

        </div>
        <table id="searchTable" class="table table-striped table-bordered " data-sort-name="date">
          <thead>
            <tr id="tr">

              <th>Username</th>
              <th>Ruolo</th>

              <th>Data Creazione</th>
              <th>Data Disabilitazione</th>

            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="user in users" ng-class-odd="'odd'" ng-class-even="'even'">

              <td>{{user.username}}</td>
              <td>{{user.ruolo}}</td>
              <td style="text-align: center">{{user.dataCreazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>
              <td style="text-align: center" ng-value="$last && caricaPaginazione('usersTable','0','asc')">{{user.dataDisabilitazione| date:'dd/MM/yyyy HH:mm:ss'}}</td>

            </tr>
          </tbody>
        </table>



      </fieldset>
    </div>
  </div>