Cannot read property style of null issue

Question

I've made this function that gives the error

Cannot read property 'style' of null

Can you please help me figure out what the problem is?

function cade()
{
    var a = document.getElementById(this.id).style.top;
    a = a + 100;
    document.getElementById(this.id).style.top =  a+'px';
}
cade.call(document.getElementById("p"));

Inside the function what does `console.log(this)` return? If it's `null` (as it seems likely to be) you probably need to read this question and its accepted answer: http://stackoverflow.com/q/14028959/82548 — David says reinstate Monica, May 11 '15 at 14:09
Can you include the relevant HTML and any CSS that may apply to it? I suspect this is related to missing style rules causing the `top` not to be applied, rather than problems with the ID or execution order. — ssube, May 11 '15 at 14:21

score 0 · Answer 1 · answered May 11 '15 at 14:07

While your function works correctly, the styling on that element prevents you from doing much to move it. Adding position: absolute or something along those lines will make it move correctly.

Since you're passing the element as this, you don't need to fetch it again using getElementById. The reference you have is already perfectly valid, so you can simplify the code like:

function cade() {
  var a = this.style.top;
  a = a + 100;
  this.style.top = a + 'px';
}
cade.call(document.getElementById("p"));

div#p {
  position: absolute;
}

<div id="p">This is some text.</div>

Cannot read property style of null issue

1 Answers1