Javascript: Uncaught TypeError: Cannot set property 'innerHTML' of null

Question

I've browsed through a couple of questions but I couldn't find any help. By the way this is the first time I'm asking a question here so I might not do it the right way. Anyway, the following line is causing me the problem

/* cursorPps defined above */
document.getElementById("cursorPps").innerHTML = cursorPps;

The cursorPps variable is already defined. Can someone point out what other possible stuff could have caused this error?

Edit: By the way the problem is that it is not updating the value on HTML, although the value of the variable changes.

HTML:

<html>

<head>
<title>Potato Clicker</title>
<link rel="stylesheet" type="text/css" href="interface.css">
</head>

<body>

<div id="left">
<img id="potato-img" onClick="potatoClick(clickPower)" src="stockvault-potatoes107220.jpg" width="300" height="300">
<br>
<div id="mainDisplay">
<span id="potatoes">0</span> <br> potatoes
<br>
<br>
Producing <span id="pps">0</span> potatoes per second
<br>
</div>
Cursors: <span id="cursors">0</span>
</div>

<div id="middle">
<div id="buildings" onClick="buyCursor()"> &nbsp; Buy Cursor &nbsp; </div>
</div>


<script src="main.js"></script>
</body>

</html>

Javascript:

//variables

var potatoes = 0;   //potatoes
var clickPower = 1; //potatoes gained per click
var pps = 0;        //potatoes per second
var cursors = 0;    //cursors
var cursorCost;     //cost of cursor
var cursorPps = 0;  //total cursor potatoes per second
var cursorBuy;      //cursor buy button


//functions

function potatoClick(number) {

potatoes = potatoes + number;
document.getElementById("potatoes").innerHTML = potatoes;

}

function buyCursor() {

var cursorCost = Math.floor(10 * Math.pow(1.2,cursors));
if (potatoes >= cursorCost) {
pps = pps - cursorPps;
cursors = cursors + 1;
potatoes = potatoes - cursorCost;
cursorPps = cursorPps + 1;
pps = pps + cursorPps;
document.getElementById("potatoes").innerHTML = potatoes;
document.getElementById("cursors").innerHTML = cursors;
document.getElementById("cursorPps").innerHTML = cursorPps;
document.getElementById("pps").innerHTML = pps;
}
else {
alert("Not enough potatoes!")
}
var nextCost = Math.floor(100 * Math.pow(1.2,cursors));       
document.getElementById('cursorCost').innerHTML = nextCost; 
}

window.setInterval(function () {

if (pps > 0) {

potatoClick(pps);

}

}, 1000);

Do you have an element with an id of cursorPps in your DOM? It would be case sensitive. — David Hoerster
– David Hoerster, Commented Dec 18, 2013 at 13:49
@epascarello I put it at the bottom, just before ending the <body> tag — Tan WS
– Tan WS, Commented Dec 18, 2013 at 14:03
Thanks @cookiemonster I solved it. So how do I close this question — Tan WS
– Tan WS, Commented Dec 18, 2013 at 14:13

leopic · Accepted Answer · 2013-12-18 13:55:01Z

3

Make sure that

You have an element has that ID
The element IS on the page before that Javascript is run
You bind the execution of your JS to an event (follow-up from previous) that happens after the element is on the page
The cursorPps variable has been populated

Here's a simple codepen that demonstrates a way to do it http://codepen.io/leopic/pen/wDtIB

answered Dec 18, 2013 at 13:55

leopic

3,0232 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tan WS Over a year ago

sorry i'm a noob um what do you mean by the 3rd and 4th points?

cookie monster Over a year ago

Your third point isn't the issue since the code runs in response to a click event. I don't know what you're getting at by the fourth point.

Patt Mehta · Accepted Answer · 2013-12-18 14:08:09Z

2

<div id="myDiv"></div>

You have an element with that ID

var length = document.querySelectorAll('#myDiv').length;
if(length > 0) {
    // This element exists in the DOM tree
}

You bind the execution of your JS to an event (follow-up from previous) that happens after the element is on the page

<body>
    <div id="myDiv"></div>
    <script>
        var length = document.querySelectorAll('#myDiv').length;
        console.log(length);
    </script>
</body>

The cursorPps variable has been populated
```
if(cursorPps != undefined)
```

answered Dec 18, 2013 at 14:08

Patt Mehta

4,2141 gold badge25 silver badges48 bronze badges

Collectives™ on Stack Overflow

Javascript: Uncaught TypeError: Cannot set property 'innerHTML' of null

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related