CODEWITHSUNDEEP
javascripthtml-table
user3569729
user3569729

Reputation: 11

Why is my table not showing up using JavaScript?

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";

Upvotes: 0

Views: 358

Answers (1)

Rui Costa
Rui Costa

Reputation: 76

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>');
}

Upvotes: 1

Related Questions