javascript代码未运行，浏览器上的空白页

时间：2019-02-10 17:34:24

标签： javascript html

我确定我犯了一个新手错误，但是对于我而言，我无法在此代码上显示任何内容，它们保存在我的comp的同一目录中，并且可以在查看源代码中查看文件和html。在chrome中，但是jsFiddle上什么都没出现？

它说我需要更多细节来提交这个问题。 我不确定还有什么可以接受的，这是我愚蠢的代码技术的一个很好的例子，该技术编写了很多东西，期望它可以远程正确地执行任何操作：/ 


<!doctype html>

<html lang="en">
<head>
 <meta charset="utf-8">

 <title>290 index file</title>
 <meta name="description" content="The HTML5 Herald">
 <meta name="author" content="SitePoint">



</head>

<body>
 <script src="./script.js"></script>
</body>
</html>



function tableMaker(){
   var d1 = document.createElement("div");
   var t = document.createElement("table");
   document.getElementById("body").appendChild(d1);
   document.getElementById("d1").appendChild(t);
   var tr1 = document.createElement("tr");
   document.getElementById("tr1").appendChild(t); 
   for(var i = 1; i < 5; i++){
       var newth = document.createElement("th");   
       newth.id = i;
       newth.textContent = "Header " + i ; 
       tr1.appendChild(newth);}

   var tr2 = document.createElement("tr");
   document.getElementById("tr2").appendChild(t); 

   for(var i = 1; i < 5; i++){
       var newth = document.createElement("td");
       newth.id = i;
       newth.textContent = "1, " + i ; 
       tr2.appendChild(newth);}

   var tr3 = document.createElement("tr");
   document.getElementById("tr3").appendChild(t); 

   for(var i = 1; i < 5; i++){
       var newth = document.createElement("td");
       newth.textContent = "2 " + i ; 
       newth.id = 4+i;

       tr3.appendChild(newth);}

   var tr4 = document.createElement("tr");
   document.getElementById("tr4").appendChild(t);  
   for(var i = 1; i < 5; i++){
       var newth = document.createElement("td");
       newth.id = 8+i;
       newth.textContent = "3 " + i ; 
       tr4.appendChild(newth);}
}



function moveUp(x){
if (x>=5)
{
   document.getElementById(x).style.borderWidth = "medium";
   x -=4;
   document.getElementById(x).style.borderWidth = "thick";
}
}
function moveDown(x){
if (x<9)
{
   document.getElementById(x).style.borderWidth = "medium";
   x -=4;
   document.getElementById(x).style.borderWidth = "thick";
}
}function moveLeft(x){

 if (x!=1 ||x!=5 ||x!=9 )
 {
   document.getElementById(x).style.borderWidth = "medium";
   x--;
   document.getElementById(x).style.borderWidth = "thick";
 }

}
function moveRight(x){
if (x!=4 ||x!=8 ||x!=12 ) {
   document.getElementById(x).style.borderWidth = "medium";
   x++;
   document.getElementById(x).style.borderWidth = "thick";
}
}

function markCell(x){
   document.getElementById(x).style.backgroundColor = "yellow"; }

tableMaker();
var d2 = document.createElement("div");
document.getElementById("body").appendChild(d2);
var up = document.createElement("button");
var down =document.createElement("button");
var left =document.createElement("button");
var right =document.createElement("button");
var mark = document.createElement("button");
document.getElementById("d1").appendChild(up);
document.getElementById("d1").appendChild(down);
document.getElementById("d1").appendChild(left);
document.getElementById("d1").appendChild(right);
document.getElementById("d1").appendChild(mark);

var x = 1;
document.getElementById(x).style.borderWidth = "thick";

up.textContent = "up";
down.textContent="down";
right.textContent="right";
left.textContent="left";
mark.textContent="Mark Cell"; 
document.getElementById("up").addEventListener("click", moveUp);
document.getElementById("down").addEventListener("click",moveDown);
document.getElementById("left").addEventListener("click", moveLeft);
document.getElementById("right").addEventListener("click",moveRight);
document.getElementById("mark").addEventListener("click", markCell);

2 个答案:

答案 0 :(得分：1)

欢迎使用StackOverflow！ 出色，因为它提供了Minimal, Complete, Verifiable example。

您遇到与document.getElementById有关的多个问题。

检查其documentation，发现它仅适用于将id属性设置为某值的html元素。

  • 例如，它查找ID设置为“ body”的任何元素。 document.getElementById("body")。获取body元素很容易：只需使用document.body。
  • 与document.getElementById("tr1")相同。没有元素的ID为 tr1 ， tr1 是包含该元素的变量的名称。修复很简单，使用tr1本身，您不需要查找它：tr1.appendChild(t);。与d1.appendChild(t);
    • 相同

但是那些appendChild的逻辑被弄乱了。

您要将表追加到tr，您想做相反的事情。确实是t.appendChild(tr1);，而不是tr1.appendChild(t);。

您有重复的ID。

HTML元素ID必须是全局（页面）唯一的。您似乎试图在第三和第四行中进行修复（通过添加4和8），但是前两行仍然发生冲突。如果您需要这些ID，我可以在其名称前加上行的索引。请记住，ID是HTML中的字符串。例如做newth.id = "TH"+i;

如何自行查找错误

我使用Chrome Dev Tools很快发现了document.getElementById个错误。只需查看控制台标签： enter image description here

您应该熟悉开发工具，它可以在调试时节省大量时间。

答案 1 :(得分：0)

我认为它不会呈现，因为您在代码中犯了很多错误，例如：

document.getElementById("body").appendChild(d1);

您正在尝试通过不存在的ID或其他示例来获取元素。

var d1 = document.createElement("div");

您创建了div元素，然后尝试通过id来获取它，就像这样：

document.getElementById("d1").appendChild(t);

要通过ID获取元素，首先需要通过setAttribute（'id'，'nameID'）获得集合ID：

d1.setAttribute('id', 'nameID')

之后，您可以通过id获取元素

相关问题
最新问题