Question

当我使用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;

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

Answer 1

移动脚本

<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及以下版本中不可用。

Answer 2

你可以把 script 标签放在底部，而不是把 script 标签放在底部，它会很好地工作

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

document.getElementById（）。textContent不使用变量

2 个答案: