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.

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.

• javascript
• document
• getelementbyid

Share Improve this question Follow edited Apr 19, 2017 at 4:55 Gaurav Gandhi 3,20122 gold badges2929 silver badges4040 bronze badges asked Apr 19, 2017 at 3:00 user6184206user6184206 4

• Put the id inside getElementbyId inside double quotes. – Om Sao Commented Apr 19, 2017 at 3:03
• I noticed that I forgot to put "" inside of when I was calling the id of pointsdisplay, after fixing this, it still doesn't do anything PLZ help! – user6184206 Commented Apr 19, 2017 at 3:03
• Quotes around getElementById("pointsdisplay") – zer00ne Commented Apr 19, 2017 at 3:03
• Without quotes around it pointsdisplay is a variable. Since you haven't defined a variable called pointsdisplay, its value is undefined, so getElementById is looking for an element named "undefined", not one named "pointsdisplay". Also, the JS is running before the p exists, so it won't find it even if you put the quotes in. – Useless Code Commented Apr 19, 2017 at 3:08

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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>

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

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

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

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.

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>

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

<script src="https://ajax.googleapis./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>