title: Javascript: Uncaught TypeError: Cannot set property 'innerHTML' of null
body: <p>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</p>
  
  <pre><code>/* cursorPps defined above */
  document.getElementById("cursorPps").innerHTML = cursorPps;
  </code></pre>
  
  <p>The <code>cursorPps</code> variable is already defined. Can someone point out what other possible stuff could have caused this error?</p>
  
  <p>Edit: By the way the problem is that it is not updating the value on HTML, although the value of the variable changes.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt;Potato Clicker&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="interface.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="left"&gt;
  &lt;img id="potato-img" onClick="potatoClick(clickPower)" src="stockvault-potatoes107220.jpg" width="300" height="300"&gt;
  &lt;br&gt;
  &lt;div id="mainDisplay"&gt;
  &lt;span id="potatoes"&gt;0&lt;/span&gt; &lt;br&gt; potatoes
  &lt;br&gt;
  &lt;br&gt;
  Producing &lt;span id="pps"&gt;0&lt;/span&gt; potatoes per second
  &lt;br&gt;
  &lt;/div&gt;
  Cursors: &lt;span id="cursors"&gt;0&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="middle"&gt;
  &lt;div id="buildings" onClick="buyCursor()"&gt; &amp;nbsp; Buy Cursor &amp;nbsp; &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>//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 &gt;= 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 &gt; 0) {
  
  potatoClick(pps);
  
  }
  
  }, 1000);
  </code></pre>