title: javascript function does not take effect when trying to change display property
body: <p>I am quite a noob for javascript so sorry for this very basic question:
  So i've been looking around but found no answer for this very simple question (I strongly believe its not that hard but couldn't figured out why my code doesn't work).
  So i try to make an Image appear after I click on another image. This is similar to what happened when you click on a picture and then the picture enlarged while making the background darker.
  My method is having an img inside a div container in which the div container will be on top of the page. The div container will have display:none attribute and i will use javascript to get the div ID and set the display:none to display:block. 
  However I stumbled upon something I don't know that make my code not work. 
  Hope anyone can help me find the problem that I wasn't aware of.</p>
  
  <p>This is my Code:</p>
  
  <pre><code>HTML
  
  enter &lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;?php
      header('Content-Type:text/html;Charset=UTF-8');
      ?&gt;
      &lt;title&gt; Western Drive - Driving Changes &lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;script src="jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="stylesheet.css" type=text/css&gt;
      &lt;link rel="stylesheet" href="testing.css" type=text/css&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script&gt;
          window.onload=function(){
          function preview(arg1)
          {
          document.getElementById("img1").style.display='block';
          document.getElementById("img1").src = arg1+'_Drawing.jpg';
          }
      }
  
  &lt;/script&gt;
  
  &lt;div id ="preview_image" style="display:none;"&gt;
  &lt;img id ="img1" src="Pictures/Product/SingleSpeedReducer/WPA_Drawing.jpg"&gt;
  &lt;/div&gt;
  &lt;div id="container"&gt;
      &lt;?php include("header.php");?&gt;
      &lt;?php include("menu.php");?&gt;
      &lt;h2 id=Sub_title&gt; Single Speed Reducer &lt;/h2&gt;
  
  &lt;!----------------------------------put the content----------------------------- here--&gt;
  &lt;div id=box style="border-top:solid 1px black ; border-bottom:solid 1px black"&gt;
  &lt;div id=pic_model&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/SingleReducer.jpg"&gt;&lt;/img&gt;&lt;/div&gt;&lt;!-- div for pic_model--&gt;
  &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPA.jpg"&gt;&lt;/img&gt;  &lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPDA.jpg" onclick="preview('Pictures/Product/SingleSpeedReducer/WPDA')"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPDKA.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPDKS.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPO.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPDO.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPX.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPDX.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPKA.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPDKA.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPKS.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id=pic_selector&gt;&lt;img src="Pictures/Product/SingleSpeedReducer/WPDKS.jpg"&gt;&lt;/img&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!-- div untuk box--&gt;
  &lt;!----------------------------------end the content----------------------------- here--&gt;
  &lt;?php include("selector.php");?&gt;
  &lt;div class="push"&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;!--div for container--&gt;
      &lt;?php include("footer.php");?&gt;
  &lt;/body&gt;
  
  
  CSS
  
  #preview_image{ position:absolute; 
  width:53%; 
  height:70%; 
  margin:12% 10% 10% 25%; 
  border:solid 3px red; 
  z-index:1;}
  
  #preview_image img{
  max-height:100%;
  max-width:100%;
  margin:0% 0% 0% 0%;
  }
  #preview_image onclick{
  max-height:100%;
  max-width:100%;
  margin:0% 0% 0% 0%;
  }
  </code></pre>
  
  <p>When i try to click img WPDA it supposed to make the change the display:none into display:block , but nothing happened...</p>