I have an element in my DOM where I have attached an ID. I want to call focus on that element after the Page Loads and set it to a css style (border: yellow) to highlight that it's currently focused. This is what I have:

//main.html
  <myElement id= 'myEl'>

//main.js
window.setTimeout(function ()  { 
        document.getElementById('#myEl').focus(); 
    }, 0);

When I refresh the page I receive this error:

Uncaught TypeError: Cannot read property 'focus' of null

I have an element in my DOM where I have attached an ID. I want to call focus on that element after the Page Loads and set it to a css style (border: yellow) to highlight that it's currently focused. This is what I have:

//main.html
  <myElement id= 'myEl'>

//main.js
window.setTimeout(function ()  { 
        document.getElementById('#myEl').focus(); 
    }, 0);

When I refresh the page I receive this error:

Uncaught TypeError: Cannot read property 'focus' of null

• javascript
• jquery
• html

• 1 The id value is "myEl", not "#myEl". You don't need the "#" when using getElementById(). – Pointy Commented Mar 8, 2016 at 16:55
• Why are you using raw javascript if you have access to jQuery? – Erik Philips Commented Mar 8, 2016 at 17:00

3 Answers 3

That because javascript can't find any element with id='#myEl', remove the extra # in :

document.getElementById('#myEl').focus(); 
_________________________^

Or use jquery selector instead :

$('#myEl').focus(); 

Component ID changes in runtime, so use a class rather than ID, will work, like

$(".ClassName").focus();

Below working code for example reference

template code

<div class="css-description">description</div>

script code

this.$nextTick(() => {
   $(".css-description").focus();
})