Running javascript in html from browser

Question 1

I have a working javascript here in jsfiddle from this post and would like to run locally with my browser.

I'm not quite sure what else I need to add to the HTML in order for it to run properly. I read many posts but still couldn't figure out how to fix it.

Below is what I have done but there are errors when running the code snippet, can someone help pls? Thanks.

$(document).ready(function myFunction() {
 // Declare variables 
 var input = document.getElementById("myInput");
 var filter = input.value.toUpperCase();
 var table = document.getElementById("myTable");
 var trs = table.tBodies[0].getElementsByTagName("tr");
 // Loop through first tbody's rows
 for (var i = 0; i < trs.length; i++) {
 // define the row's cells
 var tds = trs[i].getElementsByTagName("td");
 // hide the row
 trs[i].style.display = "none";
 // loop through row cells
 for (var i2 = 0; i2 < tds.length; i2++) {
 // if there's a match
 if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
 // show the row
 trs[i].style.display = "";
 // skip to the next row
 continue;
 }
 }
 }
});

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

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>
</head>
<body>
 <p><input id="myInput" type="text" placeholder="Search for names.." /></p>
 <table id="myTable">
 <thead>
 <tr class="header">
 <th>Date</th>
 <th>Home</th>
 <th>Time</th>
 <th>Away</th>
 <th>City</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>08/01/2018</td>
 <td>SPAIN</td>
 <td>16:30 ET</td>
 <td>USA</td>
 <td>BARCELONA</td>
 </tr>
 <tr>
 <td>08/02/2018</td>
 <td>BOLIVIA</td>
 <td>18:30 ET</td>
 <td>PORTUAL</td>
 <td>MADRID</td>
 </tr>
 <tr>
 <td>08/03/2018</td>
 <td>PUERTO RICO</td>
 <td>18:30 ET</td>
 <td>CANADA</td>
 <td>CHICAGO</td>
 </tr>
 <tr>
 <td>08/04/2018</td>
 <td>MEXICO</td>
 <td>19:30 ET</td>
 <td>ENGLAND</td>
 <td>LONDON</td>
 </tr>
 </tbody>
 </table>
</body>
</html>

Question 2

First thing you dont need jQuery here. I did two changes to your code and it worked

Removed $(document).ready( and the closing )
Added onkeyup="myFunction()" on input

Plese check below code.

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>
<body>
 <p><input id="myInput" onkeyup="myFunction()" type="text" placeholder="Search for names.." /></p>
 <table id="myTable">
 <thead>
 <tr class="header">
 <th>Date</th>
 <th>Home</th>
 <th>Time</th>
 <th>Away</th>
 <th>City</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>08/01/2018</td>
 <td>SPAIN</td>
 <td>16:30 ET</td>
 <td>USA</td>
 <td>BARCELONA</td>
 </tr>
 <tr>
 <td>08/02/2018</td>
 <td>BOLIVIA</td>
 <td>18:30 ET</td>
 <td>PORTUAL</td>
 <td>MADRID</td>
 </tr>
 <tr>
 <td>08/03/2018</td>
 <td>PUERTO RICO</td>
 <td>18:30 ET</td>
 <td>CANADA</td>
 <td>CHICAGO</td>
 </tr>
 <tr>
 <td>08/04/2018</td>
 <td>MEXICO</td>
 <td>19:30 ET</td>
 <td>ENGLAND</td>
 <td>LONDON</td>
 </tr>
 </tbody>
 </table>
</body>
<script>
function myFunction() {
 // Declare variables 
 var input = document.getElementById("myInput");
 var filter = input.value.toUpperCase();
 var table = document.getElementById("myTable");
 var trs = table.tBodies[0].getElementsByTagName("tr");
 // Loop through first tbody's rows
 for (var i = 0; i < trs.length; i++) {
 // define the row's cells
 var tds = trs[i].getElementsByTagName("td");
 // hide the row
 trs[i].style.display = "none";
 // loop through row cells
 for (var i2 = 0; i2 < tds.length; i2++) {
 // if there's a match
 if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
 // show the row
 trs[i].style.display = "";
 // skip to the next row
 continue;
 }
 }
 }
 };
 </script>

Question 3

First you need to add jquery library, and next step is add onkeyup event to your input for start function

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Example:

function myFunction() {
 // Declare variables 
 var input = document.getElementById("myInput");
 var filter = input.value.toUpperCase();
 var table = document.getElementById("myTable");
 var trs = table.tBodies[0].getElementsByTagName("tr");
 // Loop through first tbody's rows
 for (var i = 0; i < trs.length; i++) {
 // define the row's cells
 var tds = trs[i].getElementsByTagName("td");
 // hide the row
 trs[i].style.display = "none";
 // loop through row cells
 for (var i2 = 0; i2 < tds.length; i2++) {
 // if there's a match
 if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
 // show the row
 trs[i].style.display = "";
 // skip to the next row
 continue;
 }
 }
 }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <p><input id="myInput" type="text" onkeyup="myFunction()" placeholder="Search for names.." /></p>
 <table id="myTable">
 <thead>
 <tr class="header">
 <th>Date</th>
 <th>Home</th>
 <th>Time</th>
 <th>Away</th>
 <th>City</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>08/01/2018</td>
 <td>SPAIN</td>
 <td>16:30 ET</td>
 <td>USA</td>
 <td>BARCELONA</td>
 </tr>
 <tr>
 <td>08/02/2018</td>
 <td>BOLIVIA</td>
 <td>18:30 ET</td>
 <td>PORTUAL</td>
 <td>MADRID</td>
 </tr>
 <tr>
 <td>08/03/2018</td>
 <td>PUERTO RICO</td>
 <td>18:30 ET</td>
 <td>CANADA</td>
 <td>CHICAGO</td>
 </tr>
 <tr>
 <td>08/04/2018</td>
 <td>MEXICO</td>
 <td>19:30 ET</td>
 <td>ENGLAND</td>
 <td>LONDON</td>
 </tr>
 </tbody>
 </table>

Question 4

You need to remove this line :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>

Replace the jquery by the javascript function

$(document).ready(function myFunction() ...)

by the javascript onload event :

<script type="text/javascript"> function myFunction() {...} </script>
<body onload="myFunction()">

And call myFunction() in the input when keyUp like so

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."></p>

To have this :

<!DOCTYPE html>
<html>
<head>
 <style>
 #myInput {
 background-position: 10px 12px;
 background-repeat: no-repeat;
 width: 100%;
 font-size: 16px;
 padding: 12px 20px 12px 40px;
 border: 1px solid #ddd;
 margin-bottom: 12px;
 }
 
 #myTable {
 border-collapse: collapse;
 width: 100%;
 border: 1px solid #ddd;
 font-size: 18px;
 }
 
 #myTable th,
 #myTable td {
 text-align: left;
 padding: 12px;
 }
 
 #myTable th {
 width: 20%;
 }
 
 #myTable tr {
 border-bottom: 1px solid #ddd;
 }
 
 #myTable tr.header,
 #myTable tr:hover {
 background-color: #f1f1f1;
 }
 </style>
</head>
<body onload="myFunction()">
 <p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."></p>
 <table id="myTable">
 <thead>
 <tr class="header">
 <th>Date</th>
 <th>Home</th>
 <th>Time</th>
 <th>Away</th>
 <th>City</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>08/01/2018</td>
 <td>SPAIN</td>
 <td>16:30 ET</td>
 <td>USA</td>
 <td>BARCELONA</td>
 </tr>
 <tr>
 <td>08/02/2018</td>
 <td>BOLIVIA</td>
 <td>18:30 ET</td>
 <td>PORTUAL</td>
 <td>MADRID</td>
 </tr>
 <tr>
 <td>08/03/2018</td>
 <td>PUERTO RICO</td>
 <td>18:30 ET</td>
 <td>CANADA</td>
 <td>CHICAGO</td>
 </tr>
 <tr>
 <td>08/04/2018</td>
 <td>MEXICO</td>
 <td>19:30 ET</td>
 <td>ENGLAND</td>
 <td>LONDON</td>
 </tr>
 </tbody>
 </table>
</body>
<script type="text/javascript">
 function myFunction() {
 
 // Declare variables 
 var input = document.getElementById("myInput");
 var filter = input.value.toUpperCase();
 var table = document.getElementById("myTable");
 var trs = table.tBodies[0].getElementsByTagName("tr");
 // Loop through first tbody's rows
 for (var i = 0; i < trs.length; i++) {
 // define the row's cells
 var tds = trs[i].getElementsByTagName("td");
 // hide the row
 trs[i].style.display = "none";
 // loop through row cells
 for (var i2 = 0; i2 < tds.length; i2++) {
 // if there's a match
 if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
 // show the row
 trs[i].style.display = "";
 // skip to the next row
 continue;
 }
 }
 }
 };
</script>
</html>

kiranvj 34.2k8 gold badges75 silver badges81 bronze badges · Accepted Answer · 2021-03-03 07:22:45Z

First thing you dont need jQuery here. I did two changes to your code and it worked

Removed $(document).ready( and the closing )
Added onkeyup="myFunction()" on input

Plese check below code.

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>
<body>
 <p><input id="myInput" onkeyup="myFunction()" type="text" placeholder="Search for names.." /></p>
 <table id="myTable">
 <thead>
 <tr class="header">
 <th>Date</th>
 <th>Home</th>
 <th>Time</th>
 <th>Away</th>
 <th>City</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>08/01/2018</td>
 <td>SPAIN</td>
 <td>16:30 ET</td>
 <td>USA</td>
 <td>BARCELONA</td>
 </tr>
 <tr>
 <td>08/02/2018</td>
 <td>BOLIVIA</td>
 <td>18:30 ET</td>
 <td>PORTUAL</td>
 <td>MADRID</td>
 </tr>
 <tr>
 <td>08/03/2018</td>
 <td>PUERTO RICO</td>
 <td>18:30 ET</td>
 <td>CANADA</td>
 <td>CHICAGO</td>
 </tr>
 <tr>
 <td>08/04/2018</td>
 <td>MEXICO</td>
 <td>19:30 ET</td>
 <td>ENGLAND</td>
 <td>LONDON</td>
 </tr>
 </tbody>
 </table>
</body>
<script>
function myFunction() {
 // Declare variables 
 var input = document.getElementById("myInput");
 var filter = input.value.toUpperCase();
 var table = document.getElementById("myTable");
 var trs = table.tBodies[0].getElementsByTagName("tr");
 // Loop through first tbody's rows
 for (var i = 0; i < trs.length; i++) {
 // define the row's cells
 var tds = trs[i].getElementsByTagName("td");
 // hide the row
 trs[i].style.display = "none";
 // loop through row cells
 for (var i2 = 0; i2 < tds.length; i2++) {
 // if there's a match
 if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
 // show the row
 trs[i].style.display = "";
 // skip to the next row
 continue;
 }
 }
 }
 };
 </script>

CollectivesTM on Stack Overflow

Running javascript in html from browser

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related