title: getElementById in 3 ways
body: <p>I have an application that needs to retrieve a value out of a hidden input form field.  However, this application has a base page which calls another page that is in an iFrame and then it also can call itself inside another iFrame:</p>
  
  <p>default.asp -> screen.asp (in iFrame)
  screen.asp -> a new instance of screen.asp (in iFrame)</p>
  
  <pre><code>document.getElementById('focusValue').value
  window.frames[0].document.getElementById('focusValue').value
  parent.frames[arrVal].document.getElementById('focusValue').value
  </code></pre>
  
  <p>When I reference the hidden input form field from default -> screen I can use the standard <code>document.getElementById('focusValue').value;</code>.  Then when I'm in the 1st level iFrame I have to use <code>window.frames[0].document.getElementById('focusValue').value;</code>.  Then when I'm in the 2+ levels in an iFrame I have to use the <code>parent.frames[arrVal].document.getElementById('focusValue').value;</code>.</p>
  
  <p>A common structure that I'm starting to see is this:</p>
  
  <pre><code>if(document.getElementById('focusValue') == undefined){
          window.frames[0].document.getElementById('focusValue').value = focusValue;
          console.log('1');
  }else if((parent.frames.length -1) == arrVal){
          console.log('2');
          if (arrVal &gt; 0) {
              parent.frames[arrVal].document.getElementById('focusValue').value = focusValue;
          }
  }else{
      document.getElementById('focusValue').value = focusValue;
      console.log('3');
  }
  </code></pre>
  
  <p>Now I can certainly do this but outside of writing a novel worth of comments I'm concerned with other programmers(or me 1 month from now) looking at this code and wondering what I was doing.</p>
  
  <p>My question is there a way to achieve what I'm looking to do in a standard form?  I'm really hoping that there is a better way to achieve this.</p>