title: Why my event listener not behaving correctly, as my function do,, sharing the same functionality?
body: <p>Why is my event listener not behaving correctly, as my function do, sharing the same functionality?</p>
  <p>I need to hide the row in a table, based on the input in the search bar.
  The below is the functionality I have tried.</p>
  <p><a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_table</a></p>
  <p>I want this to be implemented in Event listener, instead of function.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Filter Table&lt;/title&gt;
          
          &lt;style&gt;
              body{
                  font-family: 'Bebas Neue', cursive;
                  font-family: 'M PLUS 2', sans-serif;
              }
              *{
                  box-sizing: border-box;
              }
  
              input[type = &quot;text&quot;]{
                  border: 1px solid black;
                  width: 96%;
                  margin: 0 50px;
                  padding: 10px 35px 10px 35px;
                  font-size: 15px;
                  font-family: 'Bebas Neue', cursive;
                  font-family: 'M PLUS 2', sans-serif;
                  background-image: url('https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png');
                  background-repeat: no-repeat;
                  background-size: 30px;
                  background-position: 3px 6px; 
              }
              #myTable{
                  width: 96%;
                  border: 1px solid rgb(197, 194, 194);
                  margin: 10px 50px;
                  border-collapse: collapse;
                  font-size: 20px;
              }
              #myTable td,th{
                  text-align: left;
                  padding: 20px;
              }
              tr{
                  border-bottom: 1px solid #ddd;
              }
              #myTable tr.header, #myTable tr:hover{
                  background-color: rgb(241, 241, 241);
              }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h2&gt;&lt;b&gt;My Customers&lt;/b&gt;&lt;/h2&gt;
          &lt;input type=&quot;text&quot; placeholder=&quot;Search for names..&quot; onkeyup=&quot;myFunction()&quot;  id=&quot;myInput&quot; &gt;
          &lt;table id=&quot;myTable&quot;&gt;
              &lt;tr class=&quot;header&quot;&gt;
                  &lt;th style=&quot;width: 60%;&quot;&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/th&gt;
                  &lt;th style=&quot;width: 40%;&quot;&gt;&lt;b&gt;Country&lt;/b&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Alfreds Futterkiste&lt;/td&gt;
                  &lt;td&gt;Germany&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Berglunds snabbkop&lt;/td&gt;
                  &lt;td&gt;Sweden&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Island Trading&lt;/td&gt;
                  &lt;td&gt;UK&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Koniglich Essen&lt;/td&gt;
                  &lt;td&gt;Germany&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Laughing Bacchus Winecellars&lt;/td&gt;
                  &lt;td&gt;Canada&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Magazzini Alimentari Riuniti&lt;/td&gt;
                  &lt;td&gt;Italy&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;North/South&lt;/td&gt;
                  &lt;td&gt;UK&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Paris specialites&lt;/td&gt;
                  &lt;td&gt;France&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
      &lt;script&gt;
          // Function to filter the table, based on search
          function myFunction() {
              
              var input, filter, table, tr, td, i, txtValue;
              input = document.getElementById(&quot;myInput&quot;);
              filter = input.value.toUpperCase();
              table = document.getElementById(&quot;myTable&quot;);
              tr = table.getElementsByTagName(&quot;tr&quot;);
              for (i = 0; i &lt; tr.length; i++) {
                  td = tr[i].getElementsByTagName(&quot;td&quot;)[0];
                  if (td) {
                  txtValue = td.textContent || td.innerText;
                  if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
                      tr[i].style.display = &quot;&quot;;
                  }
                  else{
                      tr[i].style.display = &quot;none&quot;;
                  }
                  }       
              }
          }
          
          // Event Listener, to filter the table, based on search
          // var input = document.getElementById('myInput');
          // input.addEventListener('click', function(){
          //     var myTable = document.getElementById('myTable');
          //     var row = myTable.getElementsByTagName('tr');
          //     var value = input.value;
          //     var ex_val = value.toUpperCase();
          //     for(var i=1;i &lt; row.length;i++){
          //         var content = row[i].getElementsByTagName('td')[0]; 
          //         var ex_con = content.textContent.toUpperCase();
          //         if ( ex_con.indexOf(ex_val) &gt; -1){
          //             row[i].style.display = '';
          //         }
          //         else{
          //             row[i].style.display = 'none';
          //         }
          //     }
          // })
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>