title: TypeError: null is not an object (evaluating 'document.getElementById(x).style')
body: <p><strong>What I want my javascript to do:</strong></p>
  
  <p>I have a div that contains a "<strong><em>onmouseover='getPosition(x)'</em></strong>" that is added and could also be removed in my javascript when I press a certain button. The function '<em>getPosition()</em>' always runs while the div is not yet deleted so that it will always get and update the position of the div and display it's x and y position in a <strong><em>textfield placeholder</em></strong></p>
  
  <pre><code>$("#canvas").append('&lt;div onmouseover="getPosition(this.id);"style="top:'+initXYpos+'px; left:'+initXYpos+'px;"&gt;Button '+index+'&lt;/div&gt;');
  </code></pre>
  
  <p><strong>The Problem:</strong></p>
  
  <p>When I delete the div that holds "<strong><em>getPosition(this.id)</em></strong>", it still runs the function while it gives an error:
   "<strong><em>TypeError: null is not an object (evaluating 'document.getElementById(x).style')</em></strong>"</p>
  
  <p>I just want it to stop running when I delete the div. </p>
  
  <p><strong>This is the function for getPosition(x):</strong></p>
  
  <pre><code>function getPosition(x){   
      $('#canvas_container').mouseover(function(){
      timer =  setInterval(function() {
        var xPos = document.getElementById(x).style.left;
        var yPos = document.getElementById(x).style.top;
        document.getElementById(x+'_fieldX').placeholder = xPos;
        document.getElementById(x+'_fieldY').placeholder = yPos;
      }, 10); }
  </code></pre>
  
  <hr>
  
  <p><strong>Note:</strong> </p>
  
  <p><em>I'm sorry if you think my question is caused by a stupid mistake. I'm really new to Javascript, I hope you understand and be happy to help me out.</em> </p>