Search code examples
javascriptdompolymerweb-component

w3schools modal images don't work in Chrome using polymer web-components

I pasted the html/css/javascript code from the modal image w3schools page to one of my pages and when I click on that image the modal image dialog doesn't get opened.
Console shows:

image

I'm using polymer starter kit 2.0.

This modal image opens up on the w3schools page itself but not when added to my page on localhost. It works in Firefox just fine. I don't know why Chrome says that element is not found.

The page has this structure:

<dom-module id="my-testView">
  <template>
   ...

      <!-- Trigger the Modal -->
      <img id="myImg" src="../images/image.jpg" alt="Trolltunga, Norway" width="300" height="200">

      <!-- The Modal -->
      <div id="myModal" class="modal">

        <!-- The Close Button -->
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

        <!-- Modal Content (The Image) -->
        <img class="modal-content" id="img01">

        <!-- Modal Caption (Image Text) -->
        <div id="caption"></div>
      </div>

   ...
 </template>

  <script>
    Polymer({
      is: 'my-testView'

    });
  </script>

<script>

// 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 <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>
</dom-module>

And adding
window.onload = function(){ CODE HERE }
or
addEventListener('WebComponentsReady', function() { CODE HERE } around this javascript code doesn't help. I don't even know where to put this javascript in order for it to work.

Solution

  • You should put your call in the Polymer element declaration, and this.$ to select an element:

    <script>
Polymer({
    is: 'my-testView',
    ready: function ()
    {
        var modal = this.$.myModal
        var img = this.$.myImg
        img.onclick = function ( ev )
        {
           //...
        }
    }
});
  </script>