Why is my table not showing up using JavaScript?

Question

This is my Javascript code. I have been trying to debug this for a week and can not figure out what I have been doing wrong. Please help me understand. I am new at coding.

HTML File

<script type="text/javascript" onload="table()"> 
function table(puppyPics, pictureDesc, pictureDate){
        

// var puppyPics =[0,1,2,3,4];
//var pictureDesc = [0,1,2,3,4];
//var pictureDate = [0,1,2,3,4];

var body = document.getElementsByTagName("body")[0];
var tbl= document.createElement("table");
var tblBody = document.createElement("tbody");

for (var i = 0; i < puppyPics.length; i++) {
    var row= document.createElement("tr");
    var cell= document.createElement("td");
    
    for (var j = 0; j < pictureDesc.length; j++) {
    document.createElement("tr");
    document.createElement("td");
    
    for (var x = 0; x < pictureDate.length; x++) {
    document.createElement("tr");
    document.createElement("td");
    
row.appendChild(cell);
}
tblBody.appendChild(row);
}
tbl.appendChild(tblBody);
body.appendChild(tbl);
tbl.setAttribute("border", "2")
    }


    }
</script>

External JS File

    var puppyPics = new Array();
    var pictureDesc = new Array();
    var pictureDate = new Array();
    
    puppyPics[0] = "AllTheKids.jpg";
    puppyPics[1] = "susie.jpg";
    puppyPics[2] = "princess.jpg";
    puppyPics[3] = "wicketAndCarlos.jpg";
    puppyPics[4] = "wicketAndGeorge.jpg";
    
    pictureDesc[0] = "This is all the new puppies together. They are so cute! I just want to hold them all.";
    pictureDesc[1] = "A friend held Susie up so that you can get a good look at her face. She looks just like her mom.";
    pictureDesc[2] = "This is Princess, she is the same color as her brother Wicket. She loves to just give kisses to everyone who holds her.";
    pictureDesc[3] = "Wicket is a very social puppy. He's not even afraid of Carlos who is my brother's dog.";
    pictureDesc[4] = "Finally, here is Wicket and George. I like how they are starting to play together. They will be running around the yard in no time";
    
    pictureDate[0] = "March 10, 2012";
    pictureDate[1] = "March 10, 2012";
    pictureDate[2] = "March 10, 2012";
    pictureDate[3] = "March 15, 2012";
    pictureDate[4] = "March 15, 2012";

Never use document.write. It doesn't work if you try it after the page is loaded. Use DOM manipulation. — John Dvorak
– John Dvorak, Commented Apr 24, 2014 at 16:25
The table function takes three arguments, then overwrites them immediately. What is the point of accepting them, then? — John Dvorak
– John Dvorak, Commented Apr 24, 2014 at 16:26
You use [...] within table, but you revert to new Array(); [0]=; [1]=... after the function definition. Why? — John Dvorak
– John Dvorak, Commented Apr 24, 2014 at 16:27

Rui Costa · Accepted Answer · 2014-04-24 21:15:25Z

Look at the following code, based on your code:

In the function "table", I leaved a comment almost at the end indicating the changed line. Also, in several places, I replaced double quotes by quotes and quotes by doble quotes. In the start of the function you can see a line with the statement "debugger". It is commented but if you uncomment it will be easy to debug the function with Firebug or another tool.

Sorry not explaining in more detail but it was a lot of changes. If you have any question just ask.

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

  <meta content="text/html; charset=UTF-8" http-equiv="content-type">
  <title>Test</title>

  <script type="text/javascript">
  <!--
    var puppyPics = new Array();
    var pictureDesc = new Array();
    var pictureDate = new Array();

    puppyPics[0] = "AllTheKids.jpg";
    puppyPics[1] = "susie.jpg";
    puppyPics[2] = "princess.jpg";
    puppyPics[3] = "wicketAndCarlos.jpg";
    puppyPics[4] = "wicketAndGeorge.jpg";

    pictureDesc[0] = "This is all the new puppies together. They are so cute! I just want to hold them all.";
    pictureDesc[1] = "A friend held Susie up so that you can get a good look at her face. She looks just like her mom.";
    pictureDesc[2] = "This is Princess, she is the same color as her brother Wicket. She loves to just give kisses to everyone who holds her.";
    pictureDesc[3] = "Wicket is a very social puppy. He's not even afraid of Carlos who is my brother's dog.";
    pictureDesc[4] = "Finally, here is Wicket and George. I like how they are starting to play together. They will be running around the yard in no time";

    pictureDate[0] = "March 10, 2012";
    pictureDate[1] = "March 10, 2012";
    pictureDate[2] = "March 10, 2012";
    pictureDate[3] = "March 15, 2012";
    pictureDate[4] = "March 15, 2012";
  //-->
  </script>

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


</head><body>

<br>
<input type="button" onclick="table(puppyPics, pictureDesc, pictureDate); return true;"  value="Create Table" />
<br>
</body></html>

**Javascript file "TestScript.js" referenced in the html as the following code **

function table(puppyPics, pictureDesc, pictureDate){
         //Uncomment the following line to force debugging with Firefox or with other tool
        // debugger;

        //Three following lines commented
    //var puppyPics =[0,1,2,3,4];
    //var pictureDesc = [0,1,2,3,4];
    //var pictureDate = [0,1,2,3,4];

    document.write('<table>');

    document.write('<tr>');
    for (var i = 0; i < puppyPics.length; i++){
        document.write('<th class="puppyPics">' + puppyPics[i] + '</th>');
    }
    document.write('</tr>');
    document.write('<tr>');
    for (var i = 0; i < pictureDesc.length; i++){
        document.write('<th class="pictureDesc">' + pictureDesc[i] + '</th>');
    }
    document.write('</tr>');
    document.write('<tr>');
    for (var i = 0; i < pictureDate.length; i++){
        document.write('<th class="puppyPics">' + pictureDate[i] + '</th>');
    }
    document.write('</tr>');
    //The following line was changed in several places
    document.write('<tcaption>' + 'There are over ' + puppyPics.length + ' pictures on this site' + '</tcaption>'); //changed  
    document.write('</table>');
}

thank you for your help. I tried your code, but I still can't seem to get the table to show up on the site.

Collectives™ on Stack Overflow

Why is my table not showing up using JavaScript?

HTML File

External JS File

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML File

External JS File

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related