title: How to open hyperlinks between different divs
body: <p>Forgive me if this is a newbie question - but sadly that's what I am.</p>
  
  <p>I have an index.html containing two divs (id's #A and #B). From the main page I can click a link to be opened in div #A using the following: </p>
  
  <pre><code>&lt;a href=page_to_open_in_A.html onClick="load_A(this); return false;"&gt;link in index&lt;/a&gt;
  
  function load_A(page)
      {
      parsedhtml='&lt;object type=text/html data="'+page.href+'"&gt;&lt;\/object&gt;';
      document.getElementById("A").innerHTML=parsedhtml;
      }
  </code></pre>
  
  <p>So far so good. But now I want to click a link inside div #A to open in div #B. I tried the following:</p>
  
  <pre><code>&lt;a href=page_to_open_in_B.html onClick="load_B(this); return false;"&gt;link in A&lt;/a&gt;
  
  function load_B(page)
      {
      parsedhtml='&lt;object type=text/html data="'+page.href+'"&gt;&lt;\/object&gt;';
      document.getElementById("B").innerHTML=parsedhtml;
      }
  </code></pre>
  
  <p>All this does is open the second link inside div #A.</p>
  
  <p>I suspect there is something wrong with the scoping of the div id's, but I can't figure out how to remedy it.</p>
  
  <p>Thanks in advance for taking pity on me!</p>
  
  <p><strong>EDIT: minimal html example using the above functions</strong></p>
  
  <p>Here is the index.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="funs.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;a href=one.html onClick="load_A(this); return false;"&gt;link_to_A&lt;/a&gt;
  
      &lt;div id=A&gt;one&lt;/div&gt;
      &lt;div id=B&gt;two&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>where funs.js contains the functions load_A() and load_B() above. The divs are described in style.css:</p>
  
  <pre><code>#A { position: absolute; top: 10%; left: 10%; width: 20%; }
  #B { position: absolute; top: 10%; right: 10%; width: 20%; }
  </code></pre>
  
  <p>and the files one.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="funs.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  Contents of one.
  
  &lt;a href=two.html onClick="load_B(this); return false;"&gt;link_to_B&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and two.html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="funs.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  Contents of two
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks again for your help!</p>