个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 00:13:29 27 4
gpt4 key购买 nike

我确信我犯了一个新手错误，但在我的一生中，我无法在这段代码上显示任何内容，它们保存在我的电脑上的同一目录中，我可以在查看源代码上查看文件和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);




最佳答案

欢迎来到 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;

如何自己发现错误

我找到了document.getElementById使用 Chrome Dev Tools 很快就会出错。只需查看控制台选项卡: enter image description here

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

关于javascript 代码未运行，浏览器上出现空白页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54619092/

27 4 0
文章推荐： javascript - 异步加载一些生成的 Javascript
文章推荐： Powershell ISE 加载旧版本脚本
文章推荐： elasticsearch - graylog-服务器将无法连接到端口9000
文章推荐： javascript - 为什么 ajax 请求会多次触发
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com