Why am I getting a 404 error message in my Javascript?

Question

My code is supposed to output a gallery and for some reason my code is unable to even display any of my images. My root folder contains the folder titled 'img' where I keep my images at and where my code is supposed to get their images from but for some reason my code isn't recognizing my folder despite my labeling it. Line 23 is where I'm getting the 404 error (I'll put in caps where line 23 is):

let galleryImages = document.querySelectorAll(".gallery-img");
let getLatestOpenedImg;
let windowWidth = window.innerWidth;
if(galleryImages) {
  galleryImages.forEach(function(image, index) {
      image.onclick = function() {
          let getElementCss = window.getComputedStyle(image);
          let getFullImgUrl = getElementCss.getPropertyValue("background-image");
          let getImgUrlPos = getFullImgUrl.split("/img/thumbs/");
          let setNewImgUrl = getImgUrlPos[1].replace('")', '');
          getLatestOpenedImg = index + 1;
          let container = document.body;
          let newImgWindow = document.createElement("div");
          container.appendChild(newImgWindow);
          newImgWindow.setAttribute("class", "img-window");
          newImgWindow.setAttribute("onclick", "closeImg()");
          let newImg = document.createElement("img");
          newImgWindow.appendChild(newImg);
          newImg.setAttribute("src", "img/" + setNewImgUrl); (LINE 23)
          newImgWindow.setAttribute("id", "current-img");
          newImg.onload = function() {
            let imgWidth = this.width;
            let calcImgToEdge = ((windowWidth - imgWidth) / 2) - 80;
            let newNextBtn = document.createElement("a");
            let btnNextText = document.createTextNode("Next");
            newNextBtn.appendChild(btnNextText);
            container.appendChild(newNextBtn);
            newNextBtn.setAttribute("class", "img-btn-next");
            newNextBtn.setAttribute("onclick", "changeImg(1)");
            newNextBtn.style.cssText = "right: " + calcImgToEdge + "px;";
            let newPrevBtn = document.createElement("a");
            let btnPrevText = document.createTextNode("Prev");
            newPrevBtn.appendChild(btnPrevText);
            container.appendChild(newPrevBtn);
            newPrevBtn.setAttribute("class", "img-btn-prev");
            newPrevBtn.setAttribute("onclick", "changeImg(0)");
            newPrevBtn.style.cssText = "left: " + calcImgToEdge + "px;";
          }
      }
  });
}
function closeImg() {
  document.querySelector(".img-window").remove();
  document.querySelector(".img-btn-next").remove();
  document.querySelector(".img-btn-prev").remove();
}
function changeImg(changeDir) {
  document.querySelector("#current-img").remove();
  let getImgWindow = document.querySelector(".img-window");
  let newImg = document.createElement("img");
  getImgWindow.appendChild(newImg);
  let calcNewImg;
  if(changeDir === 1) {
    calcNewImg = getLatestOpenedImg + 1;
    if(calcNewImg > galleryImages.length) {
      calcNewImg = 1;
    }
  }
  else if(changeDir === 0) {
    calcNewImg = getLatestOpenedImg - 1;
    if(calcNewImg < 1) {
      calcNewImg = galleryImages.length;
    }
  }
  newImg.setAttribute("src", "images/img" + calcNewImg + ".jpg");
  newImg.setAttribute("id", "current-img");
  getLatestOpenedImg = calcNewImg;
  newImg.onload = function() {
    let imgWidth = this.width;
    let calcImgToEdge = ((windowWidth - imgWidth) / 2) - 80;
    let nextBtn = document.querySelector(".img-btn-next");
    nextBtn.style.cssText = "right: " + calcImgToEdge + "px;";
    let prevBtn = document.querySelector(".img-btn-prev");
    nextBtn.style.cssText = "right: " + calcImgToEdge + "px;";
  }
}

Answer 1

Looking at your code, I would assume that this JS file is not stored in the root of your project.

For this reason, you should just be able to change line 23 to newImg.setAttribute("src", "/img/" + setNewImgUrl); (add the forward slash before img) to fix it. Adding the forward slash means the directory will be searched for starting at the root, whereas omitting the forward slash starts looking from the directory that the JS file is in.