document.getElementById无法运作/显示

Question

我在这里做错了什么？

这是代码：

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

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

请注意，我将script标签放在HTML代码中。 稍后，我将制作一个外部js文件，并将所有内容放入其中。

Answer 1

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

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

Answer 2

您应该在引号之间使用元素ID，此外，建议在script标签之前使用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

这里有两个错误

1. 您需要在ID周围加上" （双引号）
2. 您应该在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>