68

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?

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184
user2804038
  • 1,093
  • 3
  • 15
  • 17

4 Answers4

82

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.

Jemshit
  • 9,501
  • 5
  • 69
  • 106
HaukurHaf
  • 13,522
  • 5
  • 44
  • 59
24

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

vishal
  • 381
  • 2
  • 4
  • Is it possible that by following the above advice, The javascript function is called as soon as the page is rendered? So, not when the script tags on the page should invoke the function. I am also using vue.js, so perhaps this is leading to my unexpected behaviour. – HellishHeat Jan 06 '21 at 09:48
  • Just to report: I have found the error of my ways. I wanted to call the function on a different tab, which as with all vue.js apps, it is on the same "page" so in reality it is totally expected behaviour. – HellishHeat Jan 06 '21 at 10:17
3

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 !

carbontracking
  • 1,029
  • 4
  • 17
  • 33
0

Try to use createChild() method of DOM or insertRow() and insertCell() method of table object in script tag.

Deepak
  • 9
  • 3