Unable to reference dom object

Question

I am trying to set a reference to a DOM Element with the following code. For some reason anything called immediately after the reference is made works perfectly fine but calling it anywhere else in my application nothing happens. I don't get any errors like "unable to set innerHTML of undefined" which is the weirdest part. Immediately after the declaration it works fine later it doesn't do anything, yet other elements referenced in the same manner and in the same function work fine.

var dom = new function() {
  this.signInA = document.getElementById("signInPin");
  this.orderEntry = document.getElementById("orderEntry");
  this.menuGroup = document.getElementById("openGroup");
}

<div id="orderEntry">
  <div id="openGroup">
  </div>
</div>

then later i am calling

dom.openGroup.innerHTML="TEST";

But nothing is happening. This of course is just a snippet of the application, yet ive already searched through the entire document to check every other refrence to DOM and specifically dom.openGroup. dom.orderEntry works just fine through the entire application and dom.openGroup is only working in the immediate vacinity of this declaration.

it is created using var dom = new function(){}; like i said everything else works fine just not dom.openGroup — PC3TJ, Nov 02 '15 at 10:54
Also you use `dom.openGroup.innerHTML` in your example but store it in `dom.menuGroup` — mplungjan, Nov 02 '15 at 10:55
can you provide [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve)? — Grundy, Nov 02 '15 at 10:55
I just eddited that. Ive been changing the names around just to make sure i didnt accidently over write it somewhere else and happened to be mismatched when i asked the questions. — PC3TJ, Nov 02 '15 at 10:56
@Grundy i'm not exactly sure how to approach doing this as the application is about a thousand lines long across 8 files — PC3TJ, Nov 02 '15 at 10:57
code that you provide work ok: http://jsfiddle.net/9dyop394/ — Grundy, Nov 02 '15 at 10:59
so you should create a minimal sample that can reproduce your error. — Grundy, Nov 02 '15 at 10:59
I figured it out. I edited the parent elements .innerHTML attribute in a different function which of course deleted and recreated the orifinal element inside the dom — PC3TJ, Nov 02 '15 at 11:13
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/93967/discussion-between-grundy-and-pc3tj). — Grundy, Nov 02 '15 at 11:14
@JarrodRoberson that. would imply that at the time of asking the question that knowing that innerHTML was the problem in the first place. And that i was using innerHTML += in the application — PC3TJ, Jun 09 '16 at 23:37

score 0 · Answer 1 · edited Jun 09 '16 at 23:27

0

The problem I found was that the innerHTML method when changed deleted all nested DOM objects and therefore, any references to the child objects where also deleted.

So in hindsight I should either only use innerHTML on very simple objects that won't cascade down, and use other methods to append new elements into these more complex objects.

edited Jun 09 '16 at 23:27

answered Jun 09 '16 at 22:59

PC3TJ

852
5
16

actually you should **never** use `.innerHTML` – Jun 09 '16 at 23:26
@JarrodRoberson sorry but i slightly dissagree with this. There are no REAL issues with innerHTML when your not taking user Input and directly echoing it back to the user through the innerHTML property when being used for simple tasks such as quickly changing the text of a button, etc.. A lot easier with no drawback than clearing existing text nodes and creating a new one. – PC3TJ Jun 09 '16 at 23:31
[you can disagree it just makes you *willfully ignorant wrong* instead of just *plain old ignorant but can learn wrong*](http://stackoverflow.com/questions/11515383/why-is-element-innerhtml-bad-code) – Jun 09 '16 at 23:33
@JarrodRoberson. The link you provided explains the problem of having to re parse and render all child nodes of the element where I am using innerHTML+=(which im not using anyways). I am saying only using innerHTML on elements that have no children. Which according to my speedtests perform just as fast as(actually slightly faster) than removing the existing text node and adding a new one. Also creates no security threats, nor effects the code in any other way. So in what way is this a problem. Because the link you provided does not answer this specific question – PC3TJ Jun 09 '16 at 23:42
2

Well, you *did* nail yourself in the head with innerHTML, which suggests there's at least one real issue with it :) – Jun 10 '16 at 14:05

Unable to reference dom object

1 Answers1