Javascript not working from header

Question

I have problem with simple Javascript code not working from linked file in header but working in browser console for instance. Code is:

document.getElementById("displayname").onfocus = function(){alert("Hello");}

In chrome inspector I can see that script file is linked properly and I can access it in sources tab. I also get this error in loaded script file.

Uncaught TypeError: Cannot set property 'onfocus' of null

What's wrong here?

Tschallacka · Accepted Answer · 2014-03-03 12:45:56Z

2

This is because your code tries to access something with id "displayname" whilst the DOM isn't finished building and hasn't processed that piece yet where your (presumably input) object is. It processes/build up the dom from the top down.

Place your code in the footer just above the </BODY> tag and it will work beautifully since the DOM will have finished building.

answered Mar 3, 2014 at 12:45

Tschallacka

28.9k15 gold badges99 silver badges140 bronze badges

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

2 Comments

user3275701 Over a year ago

Thx Michael, that's why $( document ).ready() in JQuery is used, right?

Tschallacka Over a year ago

Yes, but new standards / conventions say it's better to place your code just above the </body> tag.

aksu · Accepted Answer · 2014-03-03 12:46:32Z

2

Try to wrap the code in window.onload.

window.onload = function() {
   document.getElementById("displayname").onfocus = function(){alert("Hello");}
}

Demo!

answered Mar 3, 2014 at 12:46

aksu

5,2365 gold badges26 silver badges39 bronze badges

Comments

Volkan Ulukut · Accepted Answer · 2014-03-03 12:45:38Z

0

The problem is by the time you execute this code displayname object does not exists. when you execute it through console, the object is already there and it runs perfectly. you have two options

put the script after the displayname object
put the script on body onload event

answered Mar 3, 2014 at 12:45

Volkan Ulukut

4,2281 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

Javascript not working from header

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related