Question

这是我的Javascript代码。我一直试图调试这一周，但无法弄清楚我做错了什么。请帮我理解。我是编码的新手。

HTML文件

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

外部JS文件

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

Answer 1

根据您的代码查看以下代码：

在功能“表格”中，我几乎在结尾处留下了一条注释，表示已更改的行。此外，在几个地方，我用引号和引号替换双引号。在函数的开头，您可以看到带有“debugger”语句的行。它被注释但如果您取消注释，使用Firebug或其他工具调试函数将很容易。

抱歉没有更详细的解释，但这是很多变化。如果您有任何问题，请询问。

HTML代码

<!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>

**在html中引用的Javascript文件“TestScript.js”，如下面的代码**

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

为什么我的桌子没有显示使用JavaScript？

HTML文件

外部JS文件

1 个答案: