title: Uncaught TypeError: Cannot read property 'addEventListener' of null
body: <p>i have a code two filter a table by using color and value (refered to stackoverflow) , but am getting an error</p>
  <p><strong>Uncaught TypeError: Cannot read property 'addEventListener' of null .</strong></p>
  <p>It shows me this error .</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
   $('#load_data').click(function(){
    $.ajax({
     url:"OutputNew.csv",
     dataType:"text",
     success:function(data){
      var employee_data = data.split(/\r?\n|\r/);
      var table_data = '&lt;button onclick="javascript:demoFromHTML()"&gt;PDF&lt;/button&gt;&lt;input type="text" id="myInput" name="myInput" placeholder="color"&gt;&lt;br&gt;&lt;input type="text" id="myInputtext" name="myInput" placeholder="First Name"&gt;&lt;br&gt;&lt;div id="VMTable"&gt;&lt;table id="myTable" class="table table-striped""&gt;';
      // var table_data = '&lt;input type="text" id="myInput" name="myInput" placeholder="color"&gt;&lt;br&gt;&lt;input type="text" id="myInputtext" name="myInput" placeholder="First Name"&gt;&lt;br&gt;&lt;table id="myTable" class="table table-striped""&gt;';
      for(var count = 0; count&lt;employee_data.length; count++) {
       var cell_data = employee_data[count].split(',');
       table_data += '&lt;tr&gt;';
       for(var cell_count=0; cell_count&lt;cell_data.length; cell_count++){
        if(count === 0){
         table_data += '&lt;th&gt;'+cell_data[cell_count]+'&lt;/th&gt;';
        }else{
            if(cell_data[cell_count] .includes("Not Matching")){
                  var ret = cell_data[cell_count].replace('Not Matching','');
                  if (ret == ""){
                    table_data += '&lt;td&gt;'+ret+'&lt;/td&gt;'
                  }else{
                    table_data += '&lt;td data-color="red"&gt;&lt;span class="badge-danger"&gt;'+ret+'&lt;/span&gt;&lt;/td&gt;'
                  }
            }else if(cell_data[cell_count] .includes("Matching")){
                  var ret = cell_data[cell_count].replace('Matching','');
                  if (ret == ""){
                    table_data += '&lt;td&gt;'+ret+'&lt;/td&gt;'
                  }else{
                    table_data += '&lt;td data-color="green"&gt;&lt;span class="badge-complete"&gt;'+ret+'&lt;/span&gt;&lt;/td&gt;';
                  }
            }else{
                table_data += '&lt;td&gt;'+cell_data[cell_count]+'&lt;/td&gt;';
            }
        }
       }
       table_data += '&lt;/tr&gt;';
      }
      table_data += '&lt;/table&gt;';
      
      $('#employee_table').html(table_data);
     }
    });   
   }); 
  });
  function myFunction() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInputtext");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
  
    // Loop through all table rows, and hide those who don't match the search query
    for (i = 0; i &lt; tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
          if (tr[i].style.display !== "none") {
            tr[i].style.display = "";
          }
        } else {
          tr[i].style.display = "none";
        }
      }
    }
    
  if (filter==="") {
  document.getElementById("myInput").value="";
  document.getElementById("myInputtext").value="";
  [...document.querySelectorAll("#myTable tbody tr")].forEach(el =&gt; { el.style.display = "" });
  }
  }
  
  
  
  
  
  function filterTable(event) {
    var filter = document.getElementById("myInput").value.toUpperCase();
    var rows = document.querySelector("#myTable tbody").rows;
  
    if (filter === "RED" || filter === "R" || filter === "RE") {
      filter = "badge-danger";
    } else if (filter === "GREEN" || filter === "G" || filter === "GR" || filter === "GRE" || filter === "GREE") {
      filter = "badge-complete";
    }
  
    for (var i = 0; i &lt; rows.length; i++) {
      var Col1 = rows[i].cells[0].innerHTML;
      var Col2 = rows[i].cells[1].innerHTML;
      var Col3 = rows[i].cells[2].innerHTML;
      if (Col1.indexOf(filter) &gt; -1 ||
        Col2.indexOf(filter) &gt; -1 ||
        Col3.indexOf(filter) &gt; -1) {
        if (rows[i].style.display !== "none") {
          rows[i].style.display = "";
        }
      } else {
        rows[i].style.display = "none";
      }
    }
  if (filter==="") {
  document.getElementById("myInput").value="";
  document.getElementById("myInputtext").value="";
  [...document.querySelectorAll("#myTable tbody tr")].forEach(el =&gt; { el.style.display = "" });
  }    
  }
  
  document.querySelector('#myInputtext').addEventListener('keyup', myFunction, false);
  document.querySelector('#myInput').addEventListener('keyup', filterTable, false);
  
          function demoFromHTML() {
              var pdf = new jsPDF('p', 'pt', 'letter');
              source = $('#VMTable')[0];
              specialElementHandlers = {
                  '#bypassme': function(element, renderer) {
                      return true
                  }
              };
              margins = {
                  top: 80,
                  bottom: 60,
                  left: 40,
                  width: 522
              };
              // all coords and widths are in jsPDF instance's declared units
              // 'inches' in this case
              pdf.fromHTML(
                      source, // HTML string or DOM elem ref.
                      margins.left, // x coord
                      margins.top, {// y coord
                          'width': margins.width, // max width of content on PDF
                          'elementHandlers': specialElementHandlers
                      },
              function(dispose) {
                  // dispose: object with X, Y of the last line add to the PDF 
                  //          this allow the insertion of new lines after html
                  pdf.save('Test.pdf');
              }
              , margins);
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
   &lt;style&gt;
  div#loadbutton {
    margin-left: 158px;
  }
  
  h1#Heading {
    margin-left: 154px;
  }
  
  td {
    border: 1px solid black;
    word-wrap: break-word;
  }
  
  .table-responsive {
    min-height: .01%;
    overflow-x: auto;
    WIDTH: 223%;
    MARGIN-LEFT: -205PX;
  }
  
  .badge-Nill {
    display: inline-block;
    min-width: 49px;
    padding: 9px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: blue;
    border-radius: 10px;
    width: 127px;
  }
  
  .badge-danger {
    display: inline-block;
    min-width: 49px;
    padding: 9px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: red;
    border-radius: 10px;
    width: 127px;
  }
  
  th {
    text-align: left;
    width: 152px;
  }
  
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 310px;
  }
  
  table td {
    border: solid 1px #fab;
    width: 100px;
    word-wrap: break-word;
  }
  
  .badge-complete {
    display: inline-block;
    min-width: 49px;
    padding: 9px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: limegreen;
    border-radius: 10px;
    width: 127px;
  }
  h1#Heading {
      margin-left: 154px;
      margin-top: -44px;
  }
  div#employee_table {
    margin-left: 170px;
    margin-right: 70px;
  }
  
   &lt;/style&gt;
    &lt;link rel = "icon" href = "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png" type = "image/x-icon"&gt; 
    &lt;title&gt;TValidator&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="jspdf.debug.js"&gt;&lt;/script&gt;
  
    
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="container"&gt;
     &lt;div class="table-responsive"&gt;
     &lt;!-- &lt;img src="banner.png" id="banner"&gt; --&gt;
      &lt;h1 id ="Heading"&gt;Validator&lt;/h1&gt;
      &lt;br /&gt;
      &lt;div id ="loadbutton"&gt;
       &lt;button type="button" name="load_data" id="load_data" class="btn btn-info"&gt;Load Data&lt;/button&gt;
       
      &lt;/div&gt;
      &lt;br /&gt;
      &lt;div id="employee_table"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and here is output.csv</p>
  <pre><code>Application,FileName,ADG,KLHJ,POWB
  ads,FileName1,jhjkhkjhMatching,jhjkhkNot Matching,jhjkhkjhMatching
  adr,FileName2,databaseMatching,databaseMatching,databaseMatching
  popo,FileName3,POEBMatching,POEBMatching,POEBMatching
  </code></pre>
  <p>so here it tells me to add even listener and i don't know where to add event listener in this code . since table is created dynamically based on csv and after button click table is loaded and then filter (require event listener) is done to table .</p>
  <p>So please help me with adding event listener</p>