title: Error: Uncaught TypeError: Cannot set property 'onclick' of null
body: <p>Please help to solve the problem:
  I want to modify the output of a picture through popup when I click.
  There is a code (original):</p>
  
  <pre><code>&lt;div class="spproperty-floor-img"&gt;
  &lt;img alt="" src="&lt;?php echo JUri::root() . $floor_plan['img']; ?&gt;"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Modified code with javascript,css and html+some php:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the image and insert it inside the modal - use its "alt" text as a caption
  var img = document.getElementById('myImg');
  var modalImg = document.getElementById("img01");
  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>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Style the Image Used to Trigger the Modal */
  #myImg {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
  }
  
  /* Caption of Modal Image (Image Text) - Same Width as the Image */
  #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 700px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 150px;
  }
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption { 
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
  }
  
  @-webkit-keyframes zoom {
      from {-webkit-transform:scale(0)} 
      to {-webkit-transform:scale(1)}
  }
  
  @keyframes zoom {
      from {transform:scale(0)} 
      to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
      position: absolute;
      top: 15px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
      .modal-content {
          width: 100%;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="property-floor-img"&gt;
  &lt;img id="myImg" src="&lt;?php echo JUri::root() . $floor_plan['img']; ?&gt;" alt=""&gt;
  &lt;div id="myModal" class="modal"&gt;
  &lt;span class="close" onclick="document.getElementById('myModal').style.display='none'"&gt;&amp;times;&lt;/span&gt;
  &lt;div id="caption"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;     </code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Javascript returns error:
  "Uncaught TypeError: Cannot set property 'onclick' of null</strong></p>
  
  <p>What's wrong here?
  Thank you in advance for your help!</p>