title: Change Modal Image on Click
body: <p>I am trying to create a modal pop up box, so that when I click on an icon, a different image pops up. I've only been able to make the same icon pop up instead of a different image. I'm basically a total beginner with JS, so I'm not sure what some of the code means or why it's needed. I'm trying to replace "cameraicon.svg" with "canon.png".</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>    &lt;img id="myImg" src="Images/cameraicon.svg" alt="This photo...." width="30" height="30"&gt;
  
  &lt;!-- The Modal --&gt;
  &lt;div id="myModal" class="modal"&gt;
    &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
    &lt;img class="modal-content" id="img01"&gt;
    &lt;img src="Images/canon.png" id="canon"&gt;
  
    &lt;div id="caption"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the image and insert it inside the modal - use its "alt" text as a caption
  function changeImage(img) {
      document.getElementById("img").src = img.src.replace("myImg", "canon");
  }
  var img = document.getElementById('myImg');
  var modalImg = document.getElementById("canon");
  var captionText = document.getElementById("caption");
  img.onclick = function(){
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
  }
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() { 
      modal.style.display = "none";
  }
  </code></pre>
  
  <p></p>