Image won't close on click - JS

Question

I have been working on creating an image that pops up only on mobile screens. At first, I was doing this with a CSS class. I was able to make an image load on the website launch and close while clicking it. However, I wasn't able to make the image show on mobile screens only.

I now have the issue where I am using an HTML id to make the image load on only mobile screens. However, I can't make the image close upon click. I think the error is in my JS code but I am not sure.

Here is my Fiddle

    HTML:
            <img id="yourimage" src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">
            <p>
            Why does the image warp when resizing and why doesn't it close on click?
            </p>


    CSS:
    #yourimage {
      display: none;
        position: absolute;
      top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      width: 50%;
      height: 50%;
    }

    @media (max-width: 500px) {
      #yourimage {
        display: block;
      }
    }

JS:

function showPopup() {
  document.GetElementId('yourimage').style.display = 'block';
}
showPopup(); // show modal image. 

function closePopUp() {
  document.GetElementId('yourimage').style.display = 'none';
}

document.GetElementId('yourimage').addEventListener('click', closePopUp); // hide modal image

I appreciate anyone taking the time to help me and look forward to any responses:)

• J

Answer 1

Use getElementById instead of GetElementId :

 function showPopup() { document.getElementById('yourimage').style.display = 'block'; } showPopup(); // show modal image. function closePopUp() { document.getElementById('yourimage').style.display = 'none'; } document.getElementById('yourimage').addEventListener('click', closePopUp); // hide modal image

 #yourimage { display: none; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%; } @media (max-width: 500px) { #yourimage { display: block; } }

 <img id="yourimage" src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg"> <p> Why does the image warp when resizing and why doesn't it close on click? </p>