Javascript error: element is null

Question

Here is all of my code... The inline JavaScript alert is firing off nicely, but the external alert is not. Whenever I reload the page I get a console error log saying "TypeError: tileBlock is null".. Any ideas? I've yet to come across this issue and I'd rather not be forced into writing all of my Javascript event handlers inline. Thanks!

#tileBlock {
    position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #0b0b0b;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(photo.jpg);
        border: 20px solid #fff;
        background-size: cover;  
    }

    @media (max-width: 400px) {
      #tileBlock {
        border-width: 8px;
      }
    }


<body>
  <div class="wrapper" id="tileBlock" onclick="alert('You clicked (inline)')"></div>
</body>




var tileBlock = document.getElementById('tileBlock');
tileBlock.onclick = function() {
    alert('you clicked(external script)');
}

It's in an external Javascript file- and anyway I got the same result when I tried putting it in the same file in script tags — Rue Kennington
– Rue Kennington, Commented May 22, 2014 at 17:57
Then you are missing a window.onload to run the script after page load — juvian
– juvian, Commented May 22, 2014 at 17:58

Hakan SONMEZ · Accepted Answer · 2014-05-22 17:57:37Z

1

Include jquery library and try this:

  $('#tileBlock').onclick(function(){
     alert('you clicked(external script)');
  });

Also I have tried your code and it works.(not my jquery) Try this: http://jsfiddle.net/XcsN/evK3v/

answered May 22, 2014 at 17:57

Hakan SONMEZ

2,2342 gold badges23 silver badges35 bronze badges

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

1 Comment

Rue Kennington Over a year ago

Thanks so much! I looked at your JsFiddle and it was calling the script on-load. I added the window.onload and that solved it... I did try your JQuery but that doesn't seem any simpler or more effective so I think I'll go with vanilla..

Rue Kennington · Accepted Answer · 2014-05-22 18:15:14Z

0

I just needed a window.onload... Thanks everyone for the help!

window.onload=function(){
var tileBlock = document.getElementById('tileBlock');
tileBlock.onclick = function() {
    alert('you clicked yes');
}
};

answered May 22, 2014 at 18:15

Rue Kennington

671 silver badge7 bronze badges

Comments

Thielicious · Accepted Answer · 2017-06-15 12:07:09Z

0

No need window before since it's reserved

onload=()=>{
    let elem // etc..
    elem.onclick=()=> // stuff ..
}

fiddle

answered Jun 15, 2017 at 12:07

Thielicious

4,4822 gold badges31 silver badges39 bronze badges

Collectives™ on Stack Overflow

Javascript error: element is null

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related