document.getElementById无法运作/显示

Question

What am i doing wrong here?

Here is the code:

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

I want to display the points on the website. I really don't understand why this isn't working.

Note that I put the script tag inside of the HTML code. Later, I will make an external js file and put everything in there.

Answer 1

You need to define the DOM in HTML before the script. Like this,

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

Answer 2

You should be having the element id between quotations and besides, it is recommended to have the DOM element before the script tag.

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

Answer 3

I think I see two problems here.

The first is that the document.getElementById needs to be given a String. You could use: document.getElementById("pointsDisplay") .

Secondly, I think you will need to put the script underneath the p. The browser will execute the script as soon as it hits the script tag.

Answer 4

There are two mistakes here,

1. You need to surround id with " (Double Quotes)
2. You should put script tag after the dom element is created, else it may execute before the actual dom is created. Even if you keep js code in a separate file, make sure you write it after your dom , just before the body tag ends.

So your code should be like,

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

Working jsFiddle

Answer 5

The id name should be in string and the HTML tag should loaded first

 <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

All of the other answers here are correct however I would like to point out that if you use the DOMContentLoaded event the script will wait until the DOM has loaded before executing.

Eg.

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