How can I run my table filter function only when clicking a button?

Question

I have a table that I created based on a model. the model I took filters the cells automatically when you start writing. I do not want that. so I created a button to filter the results when we click on the button. the problem is when you want to search the table again all my javascript code no longer works.

this is what I want: the table is only displayed when the search button is clicked. and when you want to click on input to do a second search, the table will not be displayed until you click on the button.

 function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } function myFunction2() { document.getElementById("myTable").style.display = "block"; } var input = document.getElementById("myInput"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("myBtn").click(); } }); 

 * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; outline: none; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; display: none; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } 

 <h2>Test Résultats</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <button onclick="myFunction2()" id="myBtn">Rechercher</button> <table id="myTable"> <tr> <td>Alfreds Futterkiste</td> </tr> <tr> <td>Berglunds snabbkop</td> </tr> <tr> <td>Island Trading</td> </tr> <tr> <td>Koniglich Essen</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> </tr> <tr> <td>North/South</td> </tr> <tr> <td>Paris specialites</td> </tr> </table> 

Answer 1

Just take out the keyup handlers and combine the functions:

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

 * { box-sizing: border-box; } #myInput { background-image: url('/css/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; outline: none; } #myTable { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: 18px; display: none; } #myTable th, #myTable td { text-align: left; padding: 12px; } #myTable tr { border-bottom: 1px solid #ddd; } #myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; } 

 <h2>Test Résultats</h2> <input type="text" id="myInput" placeholder="Search for names.." title="Type in a name"> <button onclick="myFunction()" id="myBtn">Rechercher</button> <table id="myTable"> <tr> <td>Alfreds Futterkiste</td> </tr> <tr> <td>Berglunds snabbkop</td> </tr> <tr> <td>Island Trading</td> </tr> <tr> <td>Koniglich Essen</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> </tr> <tr> <td>North/South</td> </tr> <tr> <td>Paris specialites</td> </tr> </table>