title: How to access onclick function outside the object?
body: <p>I am trying to implement a photo gallery(I think all of you already know about it, because i post a lot of questions :) ).
  If i assign a function in onclick property of a DOM element the function works ok.</p>
  
  <pre><code>var img_thumb = document.createElement('img');
  img_thumb.src = photos[i].img_thumb; 
  
  img_thumb.onclick = function showImage(img_thumb) {
     var index = arr_thumb.indexOf(img_thumb.target);
     document.getElementById('largeImgPanel').appendChild(arrow_right);
     document.getElementById('largeImg').src = arr_big[index].src;
     showLargeImagePanel();
     unselectAll();
  };
  </code></pre>
  
  <p>Now this is just functions, if i try to add here same showImage function and call it on click the arrow to change displayed picture it is does not work.</p>
  
  <pre><code>function showLargeImagePanel() {
      document.getElementById('largeImgPanel').style.visibility = 'visible';
  }
  
  function unselectAll() {
     if(document.selection) document.selection.empty();
     if(window.getSelection) window.getSelection().removeAllRanges();
  }
  </code></pre>
  
  <p>I tryed to rewrite it in different ways but there is no changes, if i click the arrow the "largeImagePanel" just closes.</p>
  
  <p>Here is my last version of showImage function:</p>
  
  <pre><code>function showImage(img_src) {
     document.getElementById('largeImg').src = img_src;
     showLargeImagePanel();
     unselectAll();
  };
  </code></pre>
  
  <p>Can someone give me any idea about my problem?</p>
  
  <p>if i write same property "onclick" to arrow object, the "largeImgPanel" closes again >:</p>
  
  <pre><code>arrow_right.onclick = function() {
      document.getElementById('largeImgPanel').appendChild(arrow_right);
      document.getElementById('largeImg').src = next;
      showLargeImagePanel();
      unselectAll();
  };
  </code></pre>