How to call a JavaScript function within an HTML body

Question

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?

why do you put this in function javascript?  — Guilherme Soares
– Guilherme Soares, Commented Nov 8, 2013 at 22:51
Is there a specific reason why you're creating the table with JavaScript instead of just in the HTML? — flowstoneknight
– flowstoneknight, Commented Sep 10, 2014 at 4:05

Jemshit · Accepted Answer · 2016-10-30 09:46:55Z

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.

edited Oct 30, 2016 at 9:46

Jemshit

10.1k6 gold badges74 silver badges115 bronze badges

answered Nov 8, 2013 at 22:28

HaukurHaf

13.9k6 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vishal · Accepted Answer · 2017-11-07 04:27:53Z

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

answered Nov 7, 2017 at 4:27

vishal

3912 silver badges4 bronze badges

2 Comments

HellishHeat Over a year ago

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 Over a year ago

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.

carbontracking · Accepted Answer · 2018-03-27 19:55:09Z

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 !

Deepak · Accepted Answer · 2015-04-27 07:04:50Z

0

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

answered Apr 27, 2015 at 7:04

Deepak

93 bronze badges

Collectives™ on Stack Overflow

How to call a JavaScript function within an HTML body

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related