Modal image not working on click

Question

I'm trying to make this image open a modal popup when its clicked but the click event is not being triggered. I'm looking to the code for hours and couldn't find what's wrong with the JavaScript function or if it's the class names I don't know.

What could be wrong?

Those are the codes:

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

The CSS:

.myImg {
    border - radius: 5 px;
    cursor: pointer;
    transition: 0.3 s;
}
.myImg: hover { opacity: 0.7; }
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z - index: 30; /* Sit on top */
        padding - top: 100 px; /* 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 img {
        margin: auto;
        display: block;
        width: 80 % ;
        max - width: 700 px;
    }
    /* Add Animation */
    .modal - content {
        -webkit - animation - name: zoom; -
        webkit - animation - duration: 0.6 s;
        animation - name: zoom;
        animation - duration: 0.6 s;
    }
@ - 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: 15 px;
    right: 35 px;
    color: #f1f1f1;
    font - size: 40 px;
    font - weight: bold;
    transition: 0.3 s;
}
.close: hover,
    .close: focus {
        color: #bbb;
        text - decoration: none;
        cursor: pointer;
    }
/* 100% Image Width on Smaller Screens */
@media only screen and(max - width: 700 px) {
    .modal - content {
        width: 100 % ;
    }
}.    

Answer 1

Try this:

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

My comments:

imgem.onclick (onclick function goes on lower case)

I changed the getElementByClass by getElementById