ポリマーウェブコンポーネントを使用したw3schoolsモーダル画像はChromeで動作しません

Question

モーダル画像w3schools pageのhtml/css/javascriptコードをマイページの1つに貼り付けました。画像をクリックするとモーダル画像ダイアログは表示されません開かれる。
コンソールを示しています。

私は、ポリマースターターキット2.0を使用しています。

このモーダル画像は、w3schools pageで開きますが、localhostのページに追加したときは表示されません。 Firefoxでうまく動作します。 Chromeがその要素を見つけられないと言っている理由は分かりません。

ページには、この構造を有する：

<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> 

そして、このJavaScriptコードの周り
window.onload = function(){ CODE HERE }
または
addEventListener('WebComponentsReady', function() { CODE HERE }を追加することは助けにはなりません。私はそれが動作するために、このjavascriptをどこに置くべきか知りません。

Answer 1

あなたは、ポリマー要素宣言であなたの電話を入れて、この必要があります$要素を選択する：。

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