How to call a JavaScript function within an HTML body
JavascriptHtmlJavascript Problem Overview
I have a JavaScript function that fills a table:
<script>
var col1 = ["Full time student checking (Age 22 and under) ", "Customers over age 65", "Below $500.00"];
var col2 = ["None", "None", "$8.00"];
function createtable() {
<!--To fill the table with javascript-->
for (var j = 0; j < col1.length; j++) {
if (j % 2 == 0) {
document.write("<tr><td>" + col1[j] + " </td>");
document.write("<td>" + col2[j] + "</td></tr>");
} else {
document.write("<tr bgcolor='#aeb2bf'><td>" + col1[j] + " </td>");
document.write("<td>" + col2[j] + "</td></tr1>");
}
}
}
</script>
I want to execute it within the HTML body. I have tried the following, but it doesn't create the table.
<table>
<tr>
<th>Balance</th>
<th>Fee</th>
</tr>
createtable();
</table>
How I can execute this function within the HTML body?
Javascript Solutions
Solution 1 - Javascript
Try wrapping the createtable(); statement in a <script> tag:
<table>
<tr>
<th>Balance</th>
<th>Fee</th>
</tr>
<script>createtable();</script>
</table>
I would avoid using document.write() and use the DOM if I were you though.
Solution 2 - Javascript
First include the file in head tag of html , then call the function in script tags under body tags e.g.
Js file function to be called
function tryMe(arg) {
document.write(arg);
}
HTML FILE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='object.js'> </script>
<title>abc</title><meta charset="utf-8"/>
</head>
<body>
<script>
tryMe('This is me vishal bhasin signing in');
</script>
</body>
</html>
finish
Solution 3 - Javascript
Just to clarify things, you don't/can't "execute it within the HTML body".
You can modify the contents of the HTML using javascript.
You decide at what point you want the javascript to be executed.
For example, here is the contents of a html file, including javascript, that does what you want.
<html>
<head>
<script>
// The next line document.addEventListener....
// tells the browser to execute the javascript in the function after
// the DOMContentLoaded event is complete, i.e. the browser has
// finished loading the full webpage
document.addEventListener("DOMContentLoaded", function(event) {
var col1 = ["Full time student checking (Age 22 and under) ", "Customers over age 65", "Below $500.00" ];
var col2 = ["None", "None", "$8.00"];
var TheInnerHTML ="";
for (var j = 0; j < col1.length; j++) {
TheInnerHTML += "<tr><td>"+col1[j]+"</td><td>"+col2[j]+"</td></tr>";
}
document.getElementById("TheBody").innerHTML = TheInnerHTML;});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Balance</th>
<th>Fee</th>
</tr>
</thead>
<tbody id="TheBody">
</tbody>
</table>
</body>
Enjoy !
Solution 4 - Javascript
Try to use createChild() method of DOM or insertRow() and insertCell() method of table object in script tag.