How to call a JavaScript function within an HTML body

JavascriptHtml

Javascript 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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2804038View Question on Stackoverflow
Solution 1 - JavascriptHaukurHafView Answer on Stackoverflow
Solution 2 - JavascriptvishalView Answer on Stackoverflow
Solution 3 - JavascriptcarbontrackingView Answer on Stackoverflow
Solution 4 - JavascriptDeepakView Answer on Stackoverflow