title: Why does .parentNode return 'undefined' on the 'this' pointer?
body: <p>I have set up a custom homepage that links to a few bookmarks like Google or Wikipedia.</p>
  
  <p>The links are set up as <code>a</code> elements that contain the specific site's <code>href</code>. Within the <code>a</code> element, I put a <code>div</code> with <code>class="clickArea"</code> and <code>onmouseover="overClickArea('page-description')"</code>, which displays a short description in some other <code>div</code> (that works fine).  </p>
  
  <p>Also, it should actually set the content of my own custom search bar (within the site) to the value of the <code>href</code> attribute of the parent <code>a</code> tag. The search bar is an <code>input</code> element.  </p>
  
  <p>To get that <code>href</code> value, I use <code>parentNode</code> and <code>getAttribute('href')</code> on the <code>this</code> pointer. The <code>parentNode</code> function returns <code>undefined</code> though.</p>
  
  <p>I am aware of the <code>this</code> pointer referring to the element that the function is a method of.<br>
  I have unsuccessfully tried to replace <code>this</code> with <code>div</code> and to pass <code>this</code> as a function parameter.</p>
  
  <p>I'd be glad to get that one done, thanks a lot for any help :)</p>
  
  <p>One of the links:</p>
  
  <pre><code>&lt;a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite"&gt;
      &lt;div class="clickArea" onmouseover="overClickArea('Wikipedia - The Free Encyclopedia')"&gt;
         &lt;img class="icon" src="Icon_Wikipedia.png" alt="Wikipedia" /&gt;
         &lt;br&gt;Wikipedia
      &lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>JavaScript function:  </p>
  
  <pre><code>function overClickArea(descStr){
      document.getElementById('description').innerHTML = descStr;
  
      var url = this.parentNode.getAttribute('href');
      document.getElementById('searchbar').value = url;
  }
  </code></pre>