variables in html used to reference javascript files

Question

I have html script:

<html lang="en" >
<head>
    <meta charset="utf-8">
    <!--<script type="text/javascript" src="included_name_table.js"></script> -->
    <script type="text/javascript" src="apps.js"></script>
    <script src="name_template.js"></script>  
    <center><h1>JavaScript Variables</h1></center>
    <script type="text/javascript" src="config.js"></script>  


    <center><p>In this example, x, y, and z are variables</p></center>
    <center><p id="demo"></p></center> 
    <script type="text/javascript" src="demo"></script>

<body onload="initialize('name');">
    <script type="text/javascript" src="check.js"></script>
    <p> <center> Check for Table </center> </p>
    <table height="100px" width="840px" align="center" cellspacing=0 cellpadding=0 border=2>        
        <tr><td colspan="3"><span id="name_table_body"></span></td></tr>
        <br>
    </table>
    <center> <button style="width:180px;margin-top:5px;margin-bottom:20px;" onClick="submitForm();">Submit Results</button> 
</body> 
</html>

In the line:

  <script type="text/javascript" src="included_name_table.js"></script>

I am trying to set included_name_table.js as a variable which is referenced in a configuration file config.js as table_var as shown below:

var table_var = "included_name_table.js";

The javascript included_name_table.js contains all the information for the table for names.

The reason why I am doing this is so that if I adjust the configuration file I could display another table instead of included_name_table.js. How do I go about having src equal a variable defined in config.js in the line:

  <script type="text/javascript" src="included_name_table.js"></script>

?

For additional reference, the file check.js contains the following lines:

var z = port_list_var;
document.getElementById("demo").innerHTML = z;

apps.js contains in the following lines in regards to name_table_body :

    document.getElementById("name_table_body").innerHTML = replace_params(included_name_table_var, new Array ("Names"));

included_name_table_var is referenced in the file included_name_table.js as:

 var included_name_table_var="<table border=1 cellspacing=0 cellpadding=0 width=100%><tr>" +
          "<td width=20% valign='center' align='center' ><#$1$#> :</td>" +

,etc.

how do I go about using json data in the context of what I have written? — jms1980
– jms1980, Commented Aug 30, 2016 at 19:46

Liquidchrome · Accepted Answer · 2016-08-30 22:30:09Z

you can use separate json files to define the table data and load :

Table 1 file:

{table1: {
        heading: "Table 1",
        body: "Body 1"
        }
}

Table 2 file:

{table2: {
        heading: "Table 2",
        body: "Body 2"
        }
}

In my example I just combined all the table data into one variable and you can choose which table to load by it's id. Which ever table link you click on, it will load the corresponding ID data from the json. var tables would be your json file that you link to.

HTML:

<a href="#" id="table1">Load Table 1</a>
<a href="#" id="table2">Load Table 2</a>
<p/>
<div id="loadTable">
</div>

JAVASCRIPT (with JQUERY):

var tables={table1: {
                        heading: "Table 1",
            body: "Body 1"
                        },
            table2: {
            heading: "Table 2",
            body: "Body 2"
            }
}

$(function(){
    $("a").click(function(e){
    e.preventDefault();
  var i=this.id;
    var html="<table border=1><th>"+tables[i].heading+"</th><tr><td>"+tables[i].body+"</td></tr></table>";
    $("#loadTable").html(html);
    });
})

https://jsfiddle.net/byeqv8Ld/

Michael Camden · Accepted Answer · 2016-08-30 19:48:31Z

0

So if I'm reading this right, you have javascript file which writes to a global variable table_var. The value of table_var is a javascript file that you want to load onto the page. In that case you would just need to dynamically create the script element on page load. The following code could be placed within your HTML file, or as a separate javascript file include.

(function () {
    // Create the script element
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // Assign the value of the source attribute to the globally defined table_var variable
    script.src = table_var;
    script.async = true;
    // Inject the script into the body (ideally this would go into the HEAD element, but the body works for our purposes
    document.body.appendChild(script);
})();

answered Aug 30, 2016 at 19:48

Michael Camden

1,2189 silver badges9 bronze badges

1 Comment

jms1980 Over a year ago

This worked. I added this function to the body of my html script and got what I needed. Thank you for your help.

jms1980 · Accepted Answer · 2016-09-01 17:17:37Z

I solved the issue with the following code:

 <html lang="en" >
<head>
    <meta charset="utf-8">
    <!--<script type="text/javascript" src="included_name_table.js"></script> -->
    <script type="text/javascript" src="apps.js"></script>
    <script src="name_template.js"></script>  
    <scr
    <center><h1>JavaScript Variables</h1></center>
    <script type="text/javascript" src="vra_config.js"></script>  


    <center><p>In this example, x, y, and z are variables</p></center>
    <!--<center><p id="demo"></p></center> -->
    <!--<script type="text/javascript" src="demo"></script> -->

<body onload="initialize('name');">
    <script>
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = port_list_var;
        document.body.appendChild(script); 
    </script>   
    <p id="port_list_var"></p>
    <!--<script type="text/javascript" src="check.js"></script> -->
    <p> <center> Check for Table </center> </p>
    <table height="100px" width="840px" align="center" cellspacing=0 cellpadding=0 border=2>        
        <tr><td colspan="3"><span id="name_table_body"></span></td></tr>
        <br>
    </table>
    <center> <button style="width:180px;margin-top:5px;margin-bottom:20px;" onClick="submitForm();">Submit Results</button> 
</body> 
</html>

Collectives™ on Stack Overflow

variables in html used to reference javascript files

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related