document.getElementById not working?

Question

Can someone explain why this won't work?

var element = document.getElementById('element'); // Works OK var slide = element.getElementById('slide'); // Throws an error

So the idea is to fetch DOM only once, and I have all the tags in that one variable, and then I can manipulate it and get the rest from that variable.

How can I get other elements from element variable? Is it a bad thing to use document.getElementById('id'); every time I need something from the DOM? Does it slows down webpage?

And how would I solve this problem?

No jQuery please, pure Javascript!

Thanks

can you show the whole html page

Ujjwal Kumar Gupta
– Ujjwal Kumar Gupta

2016-01-31 09:14:28 +00:00
Commented Jan 31, 2016 at 9:14 — Ujjwal Kumar Gupta
– Ujjwal Kumar Gupta, Commented Jan 31, 2016 at 9:14
Possible duplicate of chaining getElementById

Microfed
– Microfed

2016-01-31 09:15:29 +00:00
Commented Jan 31, 2016 at 9:15 — Microfed
– Microfed, Commented Jan 31, 2016 at 9:15

gurvinder372 · Accepted Answer · 2016-01-31 09:16:58Z

3

Element doesn't have getElementById method, document has,

so use

document.getElementById('slide');

answered Jan 31, 2016 at 9:16

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

Comments

Hussain Almomen · Accepted Answer · 2016-01-31 09:23:15Z

you are trying to get an element by its id. so it doesn't matter if it's nested inside elements or it's a parent element! because no more than one element in the DOM can have the same ID.

same as getting the first element you have to use:

document.getElementById('slide');

instead of:

element.getElementById('slide');

because element variable doesn't have the method getElementById. you get that from document object.

Rahul · Accepted Answer · 2016-01-31 09:15:48Z

document.getElementById('element'); will get you the control with specific ID from your DOM. So, for getting control with id slide as well you will have to use the document object

document.getElementById('slide');

Community · Accepted Answer · 2017-05-23 12:23:34Z

Element.prototype.getElementById = function(req) { var elem = this, children = elem.childNodes, i, len, id; for (i = 0, len = children.length; i < len; i++) { elem = children[i]; //we only want real elements if (elem.nodeType !== 1 ) continue; id = elem.id || elem.getAttribute('id'); if (id === req) { return elem; } //recursion ftw //find the correct element (or nothing) within the child node id = elem.getElementById(req); if (id) return id; } //no match found, return null return null; }

So you can use this code

var element = document.getElementById('element'); // Works OK var slide = element.getElementById('slide'); // Will work

From answer for another question

Collectives™ on Stack Overflow

document.getElementById not working?

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related