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>