title: javascript document.getElementById(id).src = ??? does not work since php creation of html
body: <p>I've recently changed my website from static (only html + css) to use php to generate the html allowing me to examply have a gallery showing all images in a specific folder etc. </p>
  
  <p>My javascript </p>
  
  <pre><code>function makeBigSimple(id){
  
  var src = document.getElementById(id).src;
  
  document.getElementById("imageForShow").src = src;
  
  }
  </code></pre>
  
  <p>My php just echo out the html. The part you'll be interested in is this html. </p>
  
  <pre><code>&lt;div class="bigImage" id="bigImage" style="background-color: rgba(26,18,255,0.4)"&gt;
      &lt;img id="imageForShow" src="images/gallery/showOff1.jpg" alt="Big Image" onLoad="resize('imageForShow','bigImage')"&gt;
  &lt;/div&gt;
  &lt;div class="smallImages"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;img id="image0" src="images/gallery/showOff1.jpg" onClick="makeBigSimple('image0')" alt="Click to Enlarge" onLoad="resize('image0')"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img id="image1" src="images/gallery/showOff2.jpg" onClick="makeBigSimple('image1')" alt="Click to Enlarge" onLoad="resize('image1')"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img id="image2" src="images/gallery/showOff3.jpg" onClick="makeBigSimple('image2')" alt="Click to Enlarge" onLoad="resize('image2')"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img id="image3" src="images/gallery/showOff4.jpg" onClick="makeBigSimple('image3')" alt="Click to Enlarge" onLoad="resize('image3')"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img id="image4" src="images/gallery/showOff5.jpg" onClick="makeBigSimple('image4')" alt="Click to Enlarge" onLoad="resize('image4')"/&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>These images are genereated by searching a folder for .png and .jpg gfiles, if they pass these parameters they are put in an array and for each item in that array an list item with the parameter is added. Also i have a counter which is seen with "image1, image2" etc.</p>
  
  <p>I've tried to make a printout of document.getElementById("bigImageForShow").src both before (showing my first image (images/gallery/showOff1.jpg)) and after.</p>
  
  <p>the output after is actually the picture i've clicked on on my website. But the src dont change on the visual side, and if i inspect the "big image" element, I still have the src of the starting image, even tho document.getElementById("bigImageForShow").src says otherwise.</p>