Image 模态图像在单击时不起作用

我试图让这个图像在点击时打开一个模式弹出窗口，但是点击事件没有被触发。我花了几个小时查看代码，没有发现JavaScript函数有什么问题，也没有找到我不知道的类名

有什么不对劲吗

这些是代码：

    <section class="news">  
                    <div>

                <section id="info-noticias">
                    <h1>teste</h1>
                    <p>
                        Data publicação: 02/04/2018                            
                        Publicado por: Rafael Heros de Almeida                        </p>
                </section>
                <!--<section id="banner-noticia"></section>-->
                <section id="conteudo-noticia"><p><img class="myImg" src="http://camaracampina.pr.gov.br/paineldecontrole/images/imgnoticia/3.jpg" alt="" width="675" height="386"></p></section>
                <section id="tags"><b>Tags de pesquisa:</b> </section>

                                            </div>
                </section>

                <!-- The Modal -->
                <div id="myModal" class="modal">
                  <span class="close">×</span>
                  <img class="modal-content" id="img01">
                </div>

                <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 imgem = document.getElementsByClassName("myImg");
                  var modalImg = document.getElementById("img01");
                  var captionText = document.getElementById("caption");
                  imgem.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>

    </section>

试试这个：

<section class="news">
    <div>
        <section id="info-noticias">
            <h1>teste</h1>
            <p>
                Data publicação: 02/04/2018 Publicado por: Rafael Heros de Almeida </p>
        </section>
        <!--<section id="banner-noticia"></section>-->
        <section id="conteudo-noticia">
            <img id="myImg" src="http://camaracampina.pr.gov.br/paineldecontrole/images/imgnoticia/3.jpg" alt="Trolltunga, Norway" width="675" height="386">
            <section id="tags"><b>Tags de pesquisa:</b> </section>
        </section>
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>
    <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 imgem = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    imgem.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() {
        console.log("entra");
        modal.style.display = "none";
    }
    </script>
</section>

---

我通过

getElementById

更改了

getElementByClass

您粘贴了我放置的所有代码了吗？因为我试过了，效果很好！如果有效，请接受答案。

<section class="news">
    <div>
        <section id="info-noticias">
            <h1>teste</h1>
            <p>
                Data publicação: 02/04/2018 Publicado por: Rafael Heros de Almeida </p>
        </section>
        <!--<section id="banner-noticia"></section>-->
        <section id="conteudo-noticia">
            <img id="myImg" src="http://camaracampina.pr.gov.br/paineldecontrole/images/imgnoticia/3.jpg" alt="Trolltunga, Norway" width="675" height="386">
            <section id="tags"><b>Tags de pesquisa:</b> </section>
        </section>
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>
    <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 imgem = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    imgem.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() {
        console.log("entra");
        modal.style.display = "none";
    }
    </script>
</section>

imgem.onclick (onclick function goes on lower case)