Question

我在这里做错了什么？

以下是代码：

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

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

请注意，我将脚本标记放在HTML代码中。稍后，我将创建一个外部js文件并将所有内容放在那里。

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

您应该在引号之间使用元素ID，此外，建议在脚本标记之前使用DOM元素。

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

Answer 3

我想我在这里看到两个问题。

首先，需要为document.getElementById提供一个String。您可以使用：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无效/显示

6 个答案: