Separate JavaScript functions from HTML

Question

I am creating some table model and I need one HTML file in which I will set data that need to be displayed and one (or more) JS files that will transform that data and create table. When all code is in one file it all works great but I have problems when try to separate it, so I need help.

<html>
<head>
<script>

var columns = ['address', 'city', 'name',  'state'];

var data = [
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'], 
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'], 
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],  
 ['2222 Some Street','San Francisco','John A. Smith','CA']  
];


//Set default number of items per page
var DEFAULT_NUMBER_OF_ITEMS_PER_PAGE = 20;
//Set default number of page
var DEFAULT_NUMBER_OF_PAGE = 1;
//Calculate total number of rows
var TOTAL_NUMBER_OF_ROWS = data.length;
//Function that create table header depending of data in list column
function setTableHeader(tableColumns){
    var i=0;
    tableColumns.forEach(function(entry){
        var column = document.createElement('th');
        column.id='column_'+i;
        column.innerHTML = '<a>'+entry+'</a>';
        var table = document.getElementById('table1');
        table.appendChild(column);
        i++;
    });
}

//Setting initial values for pagination variables
var itemsPerPage = DEFAULT_NUMBER_OF_ITEMS_PER_PAGE;
var page = DEFAULT_NUMBER_OF_PAGE;
var startRow = (page-1)*itemsPerPage;
var endRow = page*itemsPerPage;

//Function that sets values for pagination variables depending selection that user made
function setPaginationVariables(){
    itemsPerPage=document.getElementById("itemsPerPage").value;
    page=document.getElementById("pageNumber").value;
    if(page*itemsPerPage>TOTAL_NUMBER_OF_ROWS){
        page=DEFAULT_NUMBER_OF_PAGE;
        itemsPerPage=document.getElementById("itemsPerPage").value;
        startRow=DEFAULT_NUMBER_OF_PAGE;
        endRow=document.getElementById("itemsPerPage").value;
    }else{
        startRow = (page-1)*itemsPerPage;
        endRow = page*itemsPerPage;
    }
    generateTable(columns, data);
}

//Function that adds pagination on page
function addPagination(){
    document.body.innerHTML='<div id="itemsPerPageDiv"></div><div id="pageSelectionDiv"></div>'
    addItemsPerPage();
    addPageNumbers();
}

//Function that adds select field for items per page
function addItemsPerPage(){
    document.getElementById("itemsPerPageDiv").innerHTML='Items per page <select onchange="setPaginationVariables()" id="itemsPerPage"><option value="5">5</option><option value="10">10</option><option value="20">20</option></select>';
    document.getElementById("itemsPerPage").value=itemsPerPage;
}

//Function that adds select field for page numbers
function addPageNumbers(){
    var s = 'Pages <select id="pageNumber" onchange="setPaginationVariables()" >';
    for(i=1;i<TOTAL_NUMBER_OF_ROWS/itemsPerPage;i++){
        s+='<option value="'+(i)+'">'+(i)+'</option>'
    }
    s+='</select>';
    document.getElementById("pageSelectionDiv").innerHTML+=s;
    document.getElementById("pageNumber").value=page;
}   

//Function that generate rows
function generateRows(rowsData){
    var i=0;
    for(p=startRow; p<endRow;p++){
        var row = document.createElement('tr');
        row.id='row_'+i;
        var table = document.getElementById('table1');
        table.appendChild(row);
        fillRow(row.id , rowsData[p], i);
        i++;
    }
}

//Function that fill rows with data
function fillRow(row_id, rowData, rowNumber){
    var j=0;
    rowData.forEach(function(entry){
        var cell = document.createElement('td');
        cell.id='cell_'+rowNumber+'_'+j;
        j++;
        cell.innerHTML = '<a>'+entry+'</a>';
        var row = document.getElementById(row_id);
        row.appendChild(cell);
    });
}
//Function that generate table
function generateTable(columns, data){
    addPagination();
    var table = document.createElement('table');
    table.id = 'table1';
    document.body.appendChild(table);
    setTableHeader(columns);
    generateRows(data)
}

</script>
<style>
#table1{
width:auto; border: 1px solid black;
}

#table1 th{
border: 1px solid black
}

#table1 td{
border: 1px solid black
}
</style>

</head>
<body onload="generateTable(columns, data);">

</body>
</html>

In fact I need to keep columns and data in HTML file and everything else in JS file. Any help or advice would be great.

Here is what I tried:

File 1: index.html

<html>
<head>
<script src="Table_model.js"></script>
<script>
var columns = ['address', 'city', 'name',  'state'];
var data = [
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['1236 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['5555 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'], 
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['7777 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'],
 ['9999 Some Street','San Francisco','John A. Smith','CA'], 
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],
 ['2222 Some Street','San Francisco','John A. Smith','CA'],  
 ['2222 Some Street','San Francisco','John A. Smith','CA']  
];
function test(){
    generateTable(columns, data);
}
</script>
<style>
#table1{
width:auto; border: 1px solid black;
}

#table1 th{
border: 1px solid black
}

#table1 td{
border: 1px solid black
}
</style>

</head>
<body onload="test();">

</body>
</html>

File 2: Table_model.js

//Set default number of items per page
var DEFAULT_NUMBER_OF_ITEMS_PER_PAGE = 20;
//Set default number of page
var DEFAULT_NUMBER_OF_PAGE = 1;
//Calculate total number of rows
var TOTAL_NUMBER_OF_ROWS = data.length;
//Function that create table header depending of data in list column
function setTableHeader(tableColumns){
    var i=0;
    tableColumns.forEach(function(entry){
        var column = document.createElement('th');
        column.id='column_'+i;
        column.innerHTML = '<a>'+entry+'</a>';
        var table = document.getElementById('table1');
        table.appendChild(column);
        i++;
    });
}

//Setting initial values for pagination variables
var itemsPerPage = DEFAULT_NUMBER_OF_ITEMS_PER_PAGE;
var page = DEFAULT_NUMBER_OF_PAGE;
var startRow = (page-1)*itemsPerPage;
var endRow = page*itemsPerPage;

//Function that sets values for pagination variables depending selection that user made
function setPaginationVariables(){
    itemsPerPage=document.getElementById("itemsPerPage").value;
    page=document.getElementById("pageNumber").value;
    if(page*itemsPerPage>TOTAL_NUMBER_OF_ROWS){
        page=DEFAULT_NUMBER_OF_PAGE;
        itemsPerPage=document.getElementById("itemsPerPage").value;
        startRow=DEFAULT_NUMBER_OF_PAGE;
        endRow=document.getElementById("itemsPerPage").value;
    }else{
        startRow = (page-1)*itemsPerPage;
        endRow = page*itemsPerPage;
    }
    generateTable(columns, data);
}

//Function that adds pagination on page
function addPagination(){
    document.body.innerHTML='<div id="itemsPerPageDiv"></div><div id="pageSelectionDiv"></div>'
    addItemsPerPage();
    addPageNumbers();
}

//Function that adds select field for items per page
function addItemsPerPage(){
    document.getElementById("itemsPerPageDiv").innerHTML='Items per page <select onchange="setPaginationVariables()" id="itemsPerPage"><option value="5">5</option><option value="10">10</option><option value="20">20</option></select>';
    document.getElementById("itemsPerPage").value=itemsPerPage;
}

//Function that adds select field for page numbers
function addPageNumbers(){
    var s = 'Pages <select id="pageNumber" onchange="setPaginationVariables()" >';
    for(i=1;i<TOTAL_NUMBER_OF_ROWS/itemsPerPage;i++){
        s+='<option value="'+(i)+'">'+(i)+'</option>'
    }
    s+='</select>';
    document.getElementById("pageSelectionDiv").innerHTML+=s;
    document.getElementById("pageNumber").value=page;
}   

//Function that generate rows
function generateRows(rowsData){
    var i=0;
    for(p=startRow; p<endRow;p++){
        var row = document.createElement('tr');
        row.id='row_'+i;
        var table = document.getElementById('table1');
        table.appendChild(row);
        fillRow(row.id , rowsData[p], i);
        i++;
    }
}

//Function that fill rows with data
function fillRow(row_id, rowData, rowNumber){
    var j=0;
    rowData.forEach(function(entry){
        var cell = document.createElement('td');
        cell.id='cell_'+rowNumber+'_'+j;
        j++;
        cell.innerHTML = '<a>'+entry+'</a>';
        var row = document.getElementById(row_id);
        row.appendChild(cell);
    });
}
//Function that generate table
function generateTable(columns, data){
    addPagination();
    var table = document.createElement('table');
    table.id = 'table1';
    document.body.appendChild(table);
    setTableHeader(columns);
    generateRows(data)
}

Error that I get in this case: Uncaught ReferenceError: data is not defined

What part of that is giving you trouble? Just add <script src="path/to/external_file.js"></script> and move the code you want moved. — Blazemonger
– Blazemonger, Commented Apr 8, 2015 at 13:43
I try it but than there are different errors about undefined functions or undefined variables... — user3294091
– user3294091, Commented Apr 8, 2015 at 13:46
This would probably be better as it's own javascript plugin, rather than just moving a bunch of global variables / functions into a different file. — wahwahwah
– wahwahwah, Commented Apr 8, 2015 at 13:55
Well if you're code is working fine the way you have it. The only reason you would have a undefined error is because of the order you placed the 2 script tags. — Edwin Reynoso
– Edwin Reynoso, Commented Apr 8, 2015 at 14:00

Edward Fitzgerald · Accepted Answer · 2015-04-08 14:02:41Z

1

You'll need to make sure that if you move script to other files and link to them from your HTML page (like Blazemonger explains) that everything is still in the correct order. JavaScript is a parsed language not a compiled language. You've link to your .js file before the Script tag that you left in the HTML page. In your .js file you reference the Data variable that you create in your other script tag. But JS has not parsed that part of the code yet and doesn't know what's there.

answered Apr 8, 2015 at 14:02

Edward Fitzgerald

464 bronze badges

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

Collectives™ on Stack Overflow

Separate JavaScript functions from HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related