how to fix GET Method error on the console

Highlighted
New Member
2 0 0

Hey guys, I'm trying to create my own modal on a page of my website. I seem to have an AJAX problem which I'm not really what causes it. It happens after I click the 'close button' on my modal overlay page. 

Here's the error that I receive in the console after I click the 'close button'.

null:1 GET https://www.trex420.com/pages/null 404
Image (async)
createModal @ gallery-media:872
(anonymous) @ gallery-media:881


Here's my code in the script tag on that page.

<script>
  const mediaContainer = document.getElementById('media-container');
  const modalOverlay = document.getElementById('modal-overlay');
  let showModal = false;

  function createModal(index, src, alt) {
    showModal = true;
    modalOverlay.classList.remove('modal-hidden');
    removeScroll.className = 'wrapper-remove-scroll';
    const modalHTML = `
      <div class="modal-card">
         <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="times-circle" class="close-button" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z">
           </path>
         </svg>
         <img src="${src}" alt="${alt}">
      </div>
    `
    modalOverlay.innerHTML = modalHTML;
  }

  mediaContainer.addEventListener('click', (e) => {
    const image = e.target;
    const index = image.getAttribute('data-index');
    const imgSource = image.getAttribute('src');
    const imgAlt = image.getAttribute('alt');
    if (showModal === false) {
      createModal(index, imgSource, imgAlt);
    } 
  });

  modalOverlay.addEventListener('click', (e) => {
    const closeButton = e.target.closest('.close-button');
    if (e.target === closeButton) {
      showModal = false;
      removeScroll.classList.remove('wrapper-remove-scroll');
      modalOverlay.classList.add('modal-hidden');
      modalOverlay.innerHTML = '';
    }
  });
</script>


My modal element also doesn't seem to be adding a class as well

 removeScroll.classList.remove('wrapper-remove-scroll');
 modalOverlay.classList.add('modal-hidden');


Here's the page that I'm talking about.
https://www.trex420.com/pages/gallery-media

I'm very new to coding. So, if anyone could point me out what's the problem here. I'd really appreciate it. Thanks guys!

0 Likes