document.getElementById 不工作/显示

Question

我在这里做错了什么？

代码如下：

<script>
  var points = 1000;
  document.getElementById(pointsdisplay).innerHTML = "Points:" + points;
</script>
<p id="pointsdisplay"></p>

我想在网站上显示积分。我真的不明白为什么这不起作用。

请注意，我将脚本标记放在 HTML 代码中。稍后我会做一个外部js文件，把所有的东西都放在里面。

Answer 1

您需要在脚本前定义 HTML 中的 DOM。像这样，

<p id="pointsdisplay"></p>
<script>
var points = 1000;
document.getElementById("pointsdisplay").innerHTML = "Points:" + points;
</script>

Answer 2

你应该在引号之间有元素id，此外，建议在脚本标签之前有DOM元素。

<p id="pointsdisplay"></p>
<script>
var points = 1000;
document.getElementById('pointsdisplay').innerHTML = "Points:" + points;
</script>

Answer 3

我觉得这里有两个问题。

首先是document.getElementById需要给定一个字符串。您可以使用：document.getElementById("pointsDisplay").

其次，我认为您需要将脚本放在 p 下方。浏览器会在命中脚本标签时立即执行脚本。

Answer 4

这里有两个错误，

您需要用 "（双引号）
您应该在创建 dom 元素之后放置脚本标记，否则它可能会在创建实际的 dom 之前执行。即使您将 js 代码保存在单独的文件中，也请确保将其写在 dom 之后，就在 body 标记结束之前。

所以你的代码应该是这样的，

<p id="pointsdisplay"></p> 
<script>
    var points = 1000;
    document.getElementById('pointsdisplay').innerHTML = "Points:" + points;
</script>

工作jsFiddle

Answer 5

ID 名称应为字符串，HTML 标签应首先加载

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--you have two options -->
<p id="pointsdisplay"></p>
<!--Html tag should be loaded first -->
<script>
var points = 1000;
// the id name should be in string 
document.getElementById("pointsdisplay").innerHTML = "Points:" + points;
</script>

<!-- second option  jquery ready function, so that would wait for the document to be loaded then execute the script -->
<script>
var points = 1000;
$(document).ready(function(){
document.getElementById("pointsdisplay1").innerHTML = "Points:" + points;
});
</script>
<p id="pointsdisplay1"></p>

Answer 6

这里的所有其他答案都是正确的，但我想指出，如果您使用 DOMContentLoaded 事件，脚本将等到 DOM 已加载后再执行。

例如

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var points = 1000;
        document.getElementById("pointsdisplay").innerHTML = "Points:" + points;
    });
</script>
<p id="pointsdisplay"></p>

document.getElementById 不工作/显示

document.getElementById not working / Display

javascript

document

getelementbyid