javascript代碼未運行，瀏覽器上的空白頁

Question

我確定我犯了一個新手錯誤，但是對於我一生來說，我無法在此代碼上顯示任何內容，它們保存在我的comp的同一目錄中，我可以在chrome中查看文件和html，但是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);

Answer 1

歡迎來到StackOverflow！ 提供最小，完整，可驗證的示例的 出色工作 。

您有多個與`document.getElementById`相關的問題。

查看其文檔，查看是否僅將其id屬性設置為html的元素有效。

例如，這將查找ID設置為“ body”的任何元素。 document.getElementById("body") 。 獲取body元素很容易：只需使用document.body 。
與document.getElementById("tr1") 。 沒有元素具有id tr1 ， tr1是包含該元素的變量的名稱。 修復很簡單，使用tr1本身，無需查找： tr1.appendChild(t); 。 與d1.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開發工具很快發現了document.getElementById錯誤。 只需查看控制台標簽：

您應該熟悉開發工具，它可以在調試時節省大量時間。

Answer 2

我認為它不會呈現，因為您在代碼中犯了很多錯誤，例如：

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獲取元素

javascript代碼未運行，瀏覽器上的空白頁

問題描述

2 個解決方案

解決方案1
1 2019-02-10 17:51:54

您有多個與`document.getElementById`相關的問題。

但是那些`appendChild`的邏輯混亂了。

您有重復的ID。

如何自己發現錯誤

解決方案2
0 已采納 2019-02-10 17:48:41

javascript代碼未運行，瀏覽器上的空白頁

問題描述

2 個解決方案

解決方案1 1 2019-02-10 17:51:54

您有多個與document.getElementById相關的問題。

但是那些appendChild的邏輯混亂了。

您有重復的ID。

如何自己發現錯誤

解決方案2 0 已采納 2019-02-10 17:48:41

解決方案1
1 2019-02-10 17:51:54

您有多個與`document.getElementById`相關的問題。

但是那些`appendChild`的邏輯混亂了。

解決方案2
0 已采納 2019-02-10 17:48:41