document.getElementById().textContent无法与变量一起使用

Question

document.getElementById().textContent无法与变量一起使用

5

当我使用document.getElementById().textContent将“文本内容”设置为变量的值时，它不起作用，而是将文本内容更改为变量的值。当我使用时它确实可以工作。

.textContent = "example";

但不是

.textContent = example;

这是我的HTML代码

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script language="javascript" type="text/javascript" src="testScript.js"></script>
</head>

<body>
   <p class="heading">Heading</p>
   <p id="TextSpace"></p>


</body>

这是我的JS代码

//Get users name
var name = prompt("What is you name");
//put the name in the element "text space"
document.getElementById("TextSpace").textContent = name;

出现提示，但之后没有任何反应。

- Qwertie

2个回答

2

不必将脚本标签放在底部，只需添加defer属性即可正常运行。

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <script language="javascript" type="text/javascript" src="testScript.js" defer></script>
</head>

<body>
   <p class="heading">Heading</p>
   <p id="TextSpace"></p>


</body>

- Codewithme Arjun

这是关于 defer 属性的 MDN 文档。在这种情况下，与 async 不同，defer 将防止竞争条件问题的发生。 - Alex Malcolm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- adeneo · Accepted Answer

移动脚本

<head>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
   <p class="heading">Heading</p>
   <p id="TextSpace"></p>

   <script language="javascript" type="text/javascript" src="testScript.js"></script>
</body>

或者添加一个onload处理程序

window.onload = function() {
    var name = prompt("What is you name");
    document.getElementById("TextSpace").textContent = name;
}

目前脚本正在DOM中的元素可用之前运行。
请注意，textContent在IE8及以下版本中不可用。