我的弹出式图片在我的测试项目中无法正常工作

Question

So for my internship I want to make a popup img . so when i click on an image the img pops up larger with a background and opacity. I already have the code but it isn't working. btw don't mind the .grafisch-centrum class. it's included somewhere.

Here's my html

<img alt="Briefpapier drukken" class="resrc Gallery__FeaturedImg js-gallery-featured" data-src="https://s3-eu-west-1.amazonaws.com/printdealcdn/content_service/Briefpapier/briefpapier-drukken.png"
    id="changingImg" src="https://s3-eu-west-1.amazonaws.com/printdealcdn/content_service/Briefpapier/briefpapier-drukken.png"
    style="height: 300px !important; width: 300px !important;" />
</div>

<div class="popup" id="popup">
    <img class="popup-img" id="popup-img" />
    <span class="close">&times;</span>
</div>

Here's my css

.grafisch-centrum .popup{
    display: none;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}
.grafisch-centrum .close{
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.grafisch-centrum .close:hover,
.grafisch-centrum .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.popup-img{
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

my javascript

var popup = document.getElementById('popup');
var img = document.getElementById('changingImg');
var popupImg = document.getElementById('popup-img');

img.onclick = function () {
    popup.style.display = 'block';
    popupImg.src = this.src;
}

var close = document.getElementsByClassName("close")[0];

span.onclick = function () {
    popup.style.display = 'none';
}

Answer 1

You have the following event:

span.onclick = function () {
  popup.style.display = 'none';
} // <-- also this closing bracket was missing from your example

But span is not declared

https://jsfiddle.net/zuuajgnk/

if you open your browser's console you'll see the following error:

Uncaught ReferenceError: span is not defined

otherwise, your image does get larger on click