Как найти потерянную скобку?

258
15 мая 2022, 22:40

Делаю проэкт галерею на javascript, потерял скобку.

Ошибка расположена в функции arrows. Пишет, Uncaught SyntaxError: Illegal return statement.

function showImage(event){
    //ПРОВЕРКА И УДАЛЕНИЕ
    //##############
    if (document.querySelector(".canDelete")){
        document.querySelector(".canDelete").classList.remove("canDelete")
    }
    if (document.querySelector(".OtherMiniMain")){
        document.querySelector(".OtherMiniMain").classList.remove(".OtherMiniMain");}
    let pictures=document.querySelector(".pictures");
    if (document.querySelector(".selected")){
        document.querySelector(".selected").classList.remove("selected");
    }
    if (document.querySelector(".open")){
        document.querySelector(".open").remove()
    }
    let OtherMains=document.querySelectorAll(".otherMain");
    for (item of OtherMains){
        item.remove()
    }
    let eventImage;
    if (document.querySelector(".miniUpdate")){
        eventImage=document.querySelector(".miniUpdate");
    }
    else {
        eventImage=event.target;
    }
    //ИНИЦИАЛИЗАЦИЯ
    //#############
    let heart=document.querySelector(".heart");
    if (!eventImage.classList.contains("chosenImg")){
        heart.classList.remove("beforeChose")
    }
    else{
        heart.classList.add("beforeChose")
    }
    let main=document.querySelector("main");
    let block=document.querySelector(".show");
    let imageDiv=document.querySelector(".ImgAndArrow");
    eventImage.classList.add("selected")
    block.hidden=false;
    let other=document.querySelector(".other")
    document.body.style.overflow="hidden";
    let image=document.createElement("img");
    image.src=eventImage.src;
    image.classList.add("open");
    imageDiv.append(image);
    let OtherMainImage=image.cloneNode();
    OtherMainImage.classList.add("otherMain");
    OtherMainImage.classList.remove("open");
    OtherMainImage.classList.add("OtherMiniMain")
    createSublings()
    function createSublings(){
        createMini(2,"-");
        createMini(1,"-");
        pictures.append(OtherMainImage)
        if (document.querySelector(".chosen").textContent=="Home"){
            let items=document.querySelectorAll(".chosenImg");
            if (getChosenIndex()==items.length-2){
                createMini(1,"+")
            }
            if (getChosenIndex()<item.length-2){
                createMini(1,"+");
               createMini(2,"+");
            }
            function getChosenIndex(){
                let col=0;
                for (item of items){
                    if (item.classList.contains("selected")){
                        return col
                    }
                    col++
                }
            }}
        else{
            if (getIndex()==main.children.length-2){
            createMini(1,"+");
        }
          if (getIndex()<main.children.length-2){
            createMini(1,"+");
            createMini(2,"+");
        }
        }
        function checkNoneDiv(){
            let col=0;
            for (item of document.querySelectorAll(".noneImageDiv")){
                col++
            }
            return col
        }
        // alert(checkNoneDiv())
        function createMini(num,znak){
            let coords=OtherMainImage.getBoundingClientRect();
            let image=OtherMainImage.cloneNode();
            let Children;
            if (document.querySelector(".chosen").textContent=="Home"){
                // alert("sdf")
                Children=main.querySelectorAll(".chosenImg")
            }
            else{
                Children=main.children
            }
            image.classList.remove("OtherMiniMain");
            if (znak=="-"){
                if (!Children[getIndex()-num]){
                    if (checkNoneDiv()>=2){
                        return
                    }
                    appendNoneDiv()
                    return
                }
                image.src=Children[getIndex()-num].src;
                image.dataset.number=`r${getIndex()-num}`;
                OtherMainImage.dataset.number=`r${Number(image.getAttribute("data-number").split("").slice(1).join(""))+num}`
              pictures.append(image);
            }
            if (znak=="+"){
                if (!Children[getIndex()+num]){
                    if (checkNoneDiv()>=2){
                        return
                    }
                    appendNoneDiv()
                    return
                }
                image.src=Children[getIndex()+num].src;
                image.dataset.number=`r${getIndex()+num}`;
                OtherMainImage.dataset.number=`r${Number(image.getAttribute("data-number").split("").slice(1).join(""))-num}`
                pictures.append(image);
            }
            function appendNoneDiv(){
                let noneDiv=document.createElement("div");
                noneDiv.classList.add("noneImageDiv")
                pictures.append(noneDiv)
            }
        }
        // alert(document.querySelector("main").children[0].src);
        // image.src=main.children[getIndex()-1].src
        // other.append(image);
        // let predImage=OtherMainImage.cloneNode();
        // predImage.style.left=`${coords.left-coords.width*2-45}px`
    }
    function getIndex(){
        let col=0;
        for (item of main.children){
            if (item.classList.contains("selected")){
                return col;
            }
            col++
        }
    }
    let miniClicks=document.querySelectorAll(".otherMain");
   for (item of miniClicks){
    item.addEventListener("click",miniClick)
   }
}
function hideShow(event){
    document.querySelector(".deleteWindow").hidden=true;
    for (item of document.querySelectorAll(".noneImageDiv")){
        item.remove()
    }
    let block=document.querySelector(".show");
    block.hidden=true;
    document.body.style.overflow="auto";
    if (document.querySelector(".miniUpdate")){
        document.querySelector(".miniUpdate").classList.remove("miniUpdate")
}
}   
function miniClick(event){
    document.querySelector(".deleteWindow").hidden=true;
    if (document.querySelector(".noneImageDiv")){
        for (item of document.querySelectorAll(".noneImageDiv")){
            item.remove()
        }
    }
    if (document.querySelector(".miniUpdate")){
        document.querySelector(".miniUpdate").classList.remove("miniUpdate")
    }
    let main=document.querySelector("main");
    if (event.target.getAttribute("data-number")==null){
        return
    }
    let classIndex=Number(event.target.getAttribute("data-number").split("").slice(1).join(""));
    main.children[classIndex].classList.add("miniUpdate");
    showImage()
}
function arrows(event){
    let canDelete;
    let num=1;
    let MainMini=document.querySelector(".OtherMiniMain");
    if (!MainMini){
        return
    }
    if (!MainMini.getAttribute("data-number")){
        hideShow()
        return
    }
    let classIndex=Number(MainMini.getAttribute("data-number").split("").slice(1).join(""));
    if (document.querySelector(".canDelete")){
        if (classIndex<=0){
            document.querySelector(".canDelete").classList.remove("canDelete")
            canDelete=document.querySelector(".arrowRight");
            num=0
        }
        else{
            canDelete=document.querySelector(".arrowLeft");
        }
    }
    else{
        if (document.querySelector(".canDelete")){
        document.querySelector(".canDelete").classList.remove("canDelete")
       }
        canDelete=event.target;
    }
    
    if (document.querySelector(".miniUpdate")){
        document.querySelector(".miniUpdate").classList.remove("miniUpdate")
    }
    if (event){
        if (event.key=="ArrowRight"){
            document.querySelector(".deleteWindow").hidden=true;
            let newIndex=classIndex+1;
        if (newIndex>=main.children.length){
            return
        }
        if (document.querySelector(".chosen").textContent=="Home"){
            if (!main.children[newIndex].classList.contains("chosenImg")){
            return
        }}
        if (newIndex==1){
            document.querySelector(".noneImageDiv").remove();
            document.querySelector(".noneImageDiv").remove()
        }
        if (newIndex==2){
            document.querySelector(".noneImageDiv").remove()
        }
        // if (main.children[newIndex])
       main.children[newIndex].classList.add("miniUpdate");
       // if (main.children[newIndex].classList.contains(""))
       showImage()}
       if (event.key=="ArrowLeft"){
        document.querySelector(".deleteWindow").hidden=true;
       let newIndex=classIndex-1;
        if (newIndex<=-1){
            return
        }
        if (document.querySelector(".chosen").textContent=="Home"){
            if (!main.children[newIndex].classList.contains("chosenImg")){
            return
        }}
       main.children[newIndex].classList.add("miniUpdate");
       showImage()
       }
    }
    if (canDelete.className=="arrowRight"){
        let newIndex=classIndex+num;
        if (newIndex>=main.children.length){
            return
        }
            if (!main.children[newIndex].classList.contains("chosenImg")){
            return
        }
        if (newIndex==1){
            document.querySelector(".noneImageDiv").remove();
            document.querySelector(".noneImageDiv").remove()
        }
        if (newIndex==2){
            document.querySelector(".noneImageDiv").remove()
        }
    }
       main.children[newIndex].classList.add("miniUpdate");
       showImage()}
    //LEFT
    if (canDelete.className=="arrowLeft"){
        let newIndex=classIndex-1;
        // if (newIndex<=-1){
        //  return
        // }
        if (document.querySelector(".chosen").textContent=="Home"){
            if (!main.children[newIndex].classList.contains("chosenImg")){
            return
        }}
       main.children[newIndex].classList.add("miniUpdate");
       showImage()
    }
    if (document.querySelector(".canDelete")){
        document.querySelector(".canDelete").classList.remove("canDelete")
    }
function deleteImage(event){
    if (!document.querySelector(".selected")){
        return
    }
    if (document.querySelector(".selected").classList.contains("chosenImg")){
        document.querySelector(".heart").classList.remove("beforeChose");
    }
    if (document.querySelector(".canDelete")){
        document.querySelector(".canDelete").classList.remove("canDelete")
    }
    let pictures=document.querySelector(".pictures");
    let selected=document.querySelector(".selected");
    let deleteWindow=document.querySelector(".deleteWindow");
    if (!selected){
        hideShow()
        return
    }
    ok=document.querySelector(".deleteOk");
    cancel=document.querySelector(".deleteCancel");
    if (event.key=="Delete"|| event.target.classList.contains("trash")){
        deleteWindow.hidden=false;
        ok.addEventListener("click",deleteWindowButttons);
        cancel.addEventListener("click",deleteWindowButttons);
        document.addEventListener("keydown",deleteWindowButttons)
    }
}
function deleteWindowButttons(event){
    let pictures=document.querySelector(".pictures");
    let selected=document.querySelector(".selected");
    let deleteWindow=document.querySelector(".deleteWindow");
    if (event.target.classList.contains("deleteOk") || event.key=="Enter"){
        selected.remove();
        deleteWindow.hidden=true;
       pictures.classList.add("canDelete");
       arrows()
    }
    if (event.target.classList.contains("deleteCancel") || event.key=="Escape"){
        deleteWindow.hidden=true;
    }
    
}
function showWindowfromImage(event){
    if (document.querySelector(".selectedForRight")){
        document.querySelector(".selectedForRight").classList.remove("selectedForRight")
    }
    event.target.classList.add("selectedForRight")
    let whiteWindow=document.querySelector(".window");
    let deleteW=document.querySelector(".windowDeleteImg");
    if (!event.target.parentNode.tagName){
        return
    }
    if (event.target.parentNode.tagName!="MAIN" || event.target.tagName!="IMG"){
        whiteWindow.hidden=true;
        return
    }
    // alert(event.target.parentNode.tagName)
    whiteWindow.hidden=false;
    whiteWindow.style.left=event.pageX+"px";
    whiteWindow.style.top=event.pageY+"px";
    deleteW.addEventListener("click",deleteOrChosen)
    event.preventDefault();
}
function deleteOrChosen(event){
    document.querySelector(".selectedForRight").remove()
}
function ShowChosenBlock(event){
    let show=document.querySelector(".show")
    let main=document.querySelector("main");
    let images=main.querySelectorAll("img");
    document.querySelector(".deleteWindow").hidden=true;
    show.hidden=true;
    if (event.target.textContent=="Chosen"){
        for (item of images){
            if (!item.classList.contains("chosenImg")){
                item.hidden=true;
        }
    }
        document.body.style.background="rgba(255, 197, 249, 1)";
        event.target.textContent="Home";
        return  
    }
    if (event.target.textContent=="Home"){
        for (item of images){
            item.hidden=false;
        }
        document.body.style.background="rgba(136, 134, 134, 1)";
        event.target.textContent="Chosen";
        return  
    }}
function addToChosen(event){
    let selected=document.querySelector(".selected");
    if (selected.classList.contains("chosenImg")){
        selected.classList.remove("chosenImg")
        document.querySelector(".heart").classList.remove("beforeChose");
        return
    }
    selected.classList.add("chosenImg");
    document.querySelector(".heart").classList.add("beforeChose");
}

//РАБОТА ПРОГРАММЫ
let heart=document.querySelector(".heart");
heart.addEventListener("click", addToChosen)
let chosen=document.querySelector(".chosen");
chosen.addEventListener("click",ShowChosenBlock);
let bin=document.querySelector(".trash");
bin.addEventListener("click",deleteImage);
document.addEventListener("keydown",deleteImage);
let arrowLeft=document.querySelector(".arrowLeft");
let arrowRight=document.querySelector(".arrowRight");
arrowLeft.addEventListener("click",arrows);
arrowRight.addEventListener("click",arrows);
document.addEventListener("keydown",arrows)
let left=document.querySelector(".left");
left.addEventListener("click",hideShow)
let main=document.querySelector("main");
let images=main.querySelectorAll("img");
document.addEventListener("contextmenu",event=>event.preventDefault())
for (item of images){
    item.addEventListener("click",showImage);
    // item.addEventListener("contextmenu",showWindowfromImage);
}
let whiteWindow=document.querySelector(".window");
document.addEventListener("contextmenu",showWindowfromImage);
document.addEventListener("click",event=>whiteWindow.hidden=true);
document.addEventListener("scroll",event=>whiteWindow.hidden=true);
window.addEventListener("resize",event=>whiteWindow.hidden=true);
Answer 1

Похоже, что я был прав в комментарии к вопросу - загвоздка в том, что блок условия, который находится непосредственно под //LEFT, должен быть внутри функции arrows(). Именно об этом говорит ошибка Uncaught SyntaxError: Illegal return statement - "недопустимый оператор возврата" - потому, что возвращать что-то через return может только function, но не if, как в данном случае.

Если закомментировать return, на который ругается парсер:

    //LEFT
    if (canDelete.className=="arrowLeft"){
        let newIndex=classIndex-1;
        // if (newIndex<=-1){
        //  return
        // }
        if (document.querySelector(".chosen").textContent=="Home"){
            if (!main.children[newIndex].classList.contains("chosenImg")){
// ------>  // return
        }}
       main.children[newIndex].classList.add("miniUpdate");
       showImage()
    }

то появится ошибка Uncaught ReferenceError: canDelete is not defined, выше, но в том же блоке условия:

    //LEFT
    if (canDelete.className=="arrowLeft"){ // <----------- Ошибка!
        let newIndex=classIndex-1;
        // if (newIndex<=-1){
        //  return
        // }
        if (document.querySelector(".chosen").textContent=="Home"){
            if (!main.children[newIndex].classList.contains("chosenImg")){
// ------>  // return
        }}
       main.children[newIndex].classList.add("miniUpdate");
       showImage()
    }

Допускаю, что Вы экспериментировали с кодом и вынесли блок условия //LEFT за пределы функции, а после не нашли откуда.

Скопируйте и проверьте код ниже, ибо у меня он не запускается без разметки.

function showImage(event) {
  //ПРОВЕРКА И УДАЛЕНИЕ
  //##############
  if (document.querySelector(".canDelete")) {
    document.querySelector(".canDelete").classList.remove("canDelete");
  }
  if (document.querySelector(".OtherMiniMain")) {
    document.querySelector(".OtherMiniMain").classList.remove(".OtherMiniMain");
  }
  let pictures = document.querySelector(".pictures");
  if (document.querySelector(".selected")) {
    document.querySelector(".selected").classList.remove("selected");
  }
  if (document.querySelector(".open")) {
    document.querySelector(".open").remove();
  }
  let OtherMains = document.querySelectorAll(".otherMain");
  for (item of OtherMains) {
    item.remove();
  }
  let eventImage;
  if (document.querySelector(".miniUpdate")) {
    eventImage = document.querySelector(".miniUpdate");
  } else {
    eventImage = event.target;
  }
  //ИНИЦИАЛИЗАЦИЯ
  //#############
  let heart = document.querySelector(".heart");
  if (!eventImage.classList.contains("chosenImg")) {
    heart.classList.remove("beforeChose");
  } else {
    heart.classList.add("beforeChose");
  }
  let main = document.querySelector("main");
  let block = document.querySelector(".show");
  let imageDiv = document.querySelector(".ImgAndArrow");
  eventImage.classList.add("selected");
  block.hidden = false;
  let other = document.querySelector(".other");
  document.body.style.overflow = "hidden";
  let image = document.createElement("img");
  image.src = eventImage.src;
  image.classList.add("open");
  imageDiv.append(image);
  let OtherMainImage = image.cloneNode();
  OtherMainImage.classList.add("otherMain");
  OtherMainImage.classList.remove("open");
  OtherMainImage.classList.add("OtherMiniMain");
  createSublings();
  function createSublings() {
    createMini(2, "-");
    createMini(1, "-");
    pictures.append(OtherMainImage);
    if (document.querySelector(".chosen").textContent == "Home") {
      let items = document.querySelectorAll(".chosenImg");
      if (getChosenIndex() == items.length - 2) {
        createMini(1, "+");
      }
      if (getChosenIndex() < item.length - 2) {
        createMini(1, "+");
        createMini(2, "+");
      }
      function getChosenIndex() {
        let col = 0;
        for (item of items) {
          if (item.classList.contains("selected")) {
            return col;
          }
          col++;
        }
      }
    } else {
      if (getIndex() == main.children.length - 2) {
        createMini(1, "+");
      }
      if (getIndex() < main.children.length - 2) {
        createMini(1, "+");
        createMini(2, "+");
      }
    }
    function checkNoneDiv() {
      let col = 0;
      for (item of document.querySelectorAll(".noneImageDiv")) {
        col++;
      }
      return col;
    }
    // alert(checkNoneDiv())
    function createMini(num, znak) {
      let coords = OtherMainImage.getBoundingClientRect();
      let image = OtherMainImage.cloneNode();
      let Children;
      if (document.querySelector(".chosen").textContent == "Home") {
        // alert("sdf")
        Children = main.querySelectorAll(".chosenImg");
      } else {
        Children = main.children;
      }
      image.classList.remove("OtherMiniMain");
      if (znak == "-") {
        if (!Children[getIndex() - num]) {
          if (checkNoneDiv() >= 2) {
            return;
          }
          appendNoneDiv();
          return;
        }
        image.src = Children[getIndex() - num].src;
        image.dataset.number = `r${getIndex() - num}`;
        OtherMainImage.dataset.number = `r${
          Number(
            image.getAttribute("data-number").split("").slice(1).join("")
          ) + num
        }`;
        pictures.append(image);
      }
      if (znak == "+") {
        if (!Children[getIndex() + num]) {
          if (checkNoneDiv() >= 2) {
            return;
          }
          appendNoneDiv();
          return;
        }
        image.src = Children[getIndex() + num].src;
        image.dataset.number = `r${getIndex() + num}`;
        OtherMainImage.dataset.number = `r${
          Number(
            image.getAttribute("data-number").split("").slice(1).join("")
          ) - num
        }`;
        pictures.append(image);
      }
      function appendNoneDiv() {
        let noneDiv = document.createElement("div");
        noneDiv.classList.add("noneImageDiv");
        pictures.append(noneDiv);
      }
    }
    // alert(document.querySelector("main").children[0].src);
    // image.src=main.children[getIndex()-1].src
    // other.append(image);
    // let predImage=OtherMainImage.cloneNode();
    // predImage.style.left=`${coords.left-coords.width*2-45}px`
  }
  function getIndex() {
    let col = 0;
    for (item of main.children) {
      if (item.classList.contains("selected")) {
        return col;
      }
      col++;
    }
  }
  let miniClicks = document.querySelectorAll(".otherMain");
  for (item of miniClicks) {
    item.addEventListener("click", miniClick);
  }
}
function hideShow(event) {
  document.querySelector(".deleteWindow").hidden = true;
  for (item of document.querySelectorAll(".noneImageDiv")) {
    item.remove();
  }
  let block = document.querySelector(".show");
  block.hidden = true;
  document.body.style.overflow = "auto";
  if (document.querySelector(".miniUpdate")) {
    document.querySelector(".miniUpdate").classList.remove("miniUpdate");
  }
}
function miniClick(event) {
  document.querySelector(".deleteWindow").hidden = true;
  if (document.querySelector(".noneImageDiv")) {
    for (item of document.querySelectorAll(".noneImageDiv")) {
      item.remove();
    }
  }
  if (document.querySelector(".miniUpdate")) {
    document.querySelector(".miniUpdate").classList.remove("miniUpdate");
  }
  let main = document.querySelector("main");
  if (event.target.getAttribute("data-number") == null) {
    return;
  }
  let classIndex = Number(
    event.target.getAttribute("data-number").split("").slice(1).join("")
  );
  main.children[classIndex].classList.add("miniUpdate");
  showImage();
}
function arrows(event) {
  let canDelete;
  let num = 1;
  let MainMini = document.querySelector(".OtherMiniMain");
  if (!MainMini) {
    return;
  }
  if (!MainMini.getAttribute("data-number")) {
    hideShow();
    return;
  }
  let classIndex = Number(
    MainMini.getAttribute("data-number").split("").slice(1).join("")
  );
  if (document.querySelector(".canDelete")) {
    if (classIndex <= 0) {
      document.querySelector(".canDelete").classList.remove("canDelete");
      canDelete = document.querySelector(".arrowRight");
      num = 0;
    } else {
      canDelete = document.querySelector(".arrowLeft");
    }
  } else {
    if (document.querySelector(".canDelete")) {
      document.querySelector(".canDelete").classList.remove("canDelete");
    }
    canDelete = event.target;
  }
  if (document.querySelector(".miniUpdate")) {
    document.querySelector(".miniUpdate").classList.remove("miniUpdate");
  }
  if (event) {
    if (event.key == "ArrowRight") {
      document.querySelector(".deleteWindow").hidden = true;
      let newIndex = classIndex + 1;
      if (newIndex >= main.children.length) {
        return;
      }
      if (document.querySelector(".chosen").textContent == "Home") {
        if (!main.children[newIndex].classList.contains("chosenImg")) {
          return;
        }
      }
      if (newIndex == 1) {
        document.querySelector(".noneImageDiv").remove();
        document.querySelector(".noneImageDiv").remove();
      }
      if (newIndex == 2) {
        document.querySelector(".noneImageDiv").remove();
      }
      // if (main.children[newIndex])
      main.children[newIndex].classList.add("miniUpdate");
      // if (main.children[newIndex].classList.contains(""))
      showImage();
    }
    if (event.key == "ArrowLeft") {
      document.querySelector(".deleteWindow").hidden = true;
      let newIndex = classIndex - 1;
      if (newIndex <= -1) {
        return;
      }
      if (document.querySelector(".chosen").textContent == "Home") {
        if (!main.children[newIndex].classList.contains("chosenImg")) {
          return;
        }
      }
      main.children[newIndex].classList.add("miniUpdate");
      showImage();
    }
  }
  if (canDelete.className == "arrowRight") {
    let newIndex = classIndex + num;
    if (newIndex >= main.children.length) {
      return;
    }
    if (!main.children[newIndex].classList.contains("chosenImg")) {
      return;
    }
    if (newIndex == 1) {
      document.querySelector(".noneImageDiv").remove();
      document.querySelector(".noneImageDiv").remove();
    }
    if (newIndex == 2) {
      document.querySelector(".noneImageDiv").remove();
    }
  }
  //LEFT
  if (canDelete.className == "arrowLeft") {
    let newIndex = classIndex - 1;
    // if (newIndex<=-1){
    //  return
    // }
    if (document.querySelector(".chosen").textContent == "Home") {
      if (!main.children[newIndex].classList.contains("chosenImg")) {
        return;
      }
    }
  }
  main.children[newIndex].classList.add("miniUpdate");
  showImage();
}
if (document.querySelector(".canDelete")) {
  document.querySelector(".canDelete").classList.remove("canDelete");
}
function deleteImage(event) {
  if (!document.querySelector(".selected")) {
    return;
  }
  if (document.querySelector(".selected").classList.contains("chosenImg")) {
    document.querySelector(".heart").classList.remove("beforeChose");
  }
  if (document.querySelector(".canDelete")) {
    document.querySelector(".canDelete").classList.remove("canDelete");
  }
  let pictures = document.querySelector(".pictures");
  let selected = document.querySelector(".selected");
  let deleteWindow = document.querySelector(".deleteWindow");
  if (!selected) {
    hideShow();
    return;
  }
  ok = document.querySelector(".deleteOk");
  cancel = document.querySelector(".deleteCancel");
  if (event.key == "Delete" || event.target.classList.contains("trash")) {
    deleteWindow.hidden = false;
    ok.addEventListener("click", deleteWindowButttons);
    cancel.addEventListener("click", deleteWindowButttons);
    document.addEventListener("keydown", deleteWindowButttons);
  }
}
function deleteWindowButttons(event) {
  let pictures = document.querySelector(".pictures");
  let selected = document.querySelector(".selected");
  let deleteWindow = document.querySelector(".deleteWindow");
  if (event.target.classList.contains("deleteOk") || event.key == "Enter") {
    selected.remove();
    deleteWindow.hidden = true;
    pictures.classList.add("canDelete");
    arrows();
  }
  if (
    event.target.classList.contains("deleteCancel") ||
    event.key == "Escape"
  ) {
    deleteWindow.hidden = true;
  }
}
function showWindowfromImage(event) {
  if (document.querySelector(".selectedForRight")) {
    document
      .querySelector(".selectedForRight")
      .classList.remove("selectedForRight");
  }
  event.target.classList.add("selectedForRight");
  let whiteWindow = document.querySelector(".window");
  let deleteW = document.querySelector(".windowDeleteImg");
  if (!event.target.parentNode.tagName) {
    return;
  }
  if (
    event.target.parentNode.tagName != "MAIN" ||
    event.target.tagName != "IMG"
  ) {
    whiteWindow.hidden = true;
    return;
  }
  // alert(event.target.parentNode.tagName)
  whiteWindow.hidden = false;
  whiteWindow.style.left = event.pageX + "px";
  whiteWindow.style.top = event.pageY + "px";
  deleteW.addEventListener("click", deleteOrChosen);
  event.preventDefault();
}
function deleteOrChosen(event) {
  document.querySelector(".selectedForRight").remove();
}
function ShowChosenBlock(event) {
  let show = document.querySelector(".show");
  let main = document.querySelector("main");
  let images = main.querySelectorAll("img");
  document.querySelector(".deleteWindow").hidden = true;
  show.hidden = true;
  if (event.target.textContent == "Chosen") {
    for (item of images) {
      if (!item.classList.contains("chosenImg")) {
        item.hidden = true;
      }
    }
    document.body.style.background = "rgba(255, 197, 249, 1)";
    event.target.textContent = "Home";
    return;
  }
  if (event.target.textContent == "Home") {
    for (item of images) {
      item.hidden = false;
    }
    document.body.style.background = "rgba(136, 134, 134, 1)";
    event.target.textContent = "Chosen";
    return;
  }
}
function addToChosen(event) {
  let selected = document.querySelector(".selected");
  if (selected.classList.contains("chosenImg")) {
    selected.classList.remove("chosenImg");
    document.querySelector(".heart").classList.remove("beforeChose");
    return;
  }
  selected.classList.add("chosenImg");
  document.querySelector(".heart").classList.add("beforeChose");
}
//РАБОТА ПРОГРАММЫ
let heart = document.querySelector(".heart");
heart.addEventListener("click", addToChosen);
let chosen = document.querySelector(".chosen");
chosen.addEventListener("click", ShowChosenBlock);
let bin = document.querySelector(".trash");
bin.addEventListener("click", deleteImage);
document.addEventListener("keydown", deleteImage);
let arrowLeft = document.querySelector(".arrowLeft");
let arrowRight = document.querySelector(".arrowRight");
arrowLeft.addEventListener("click", arrows);
arrowRight.addEventListener("click", arrows);
document.addEventListener("keydown", arrows);
let left = document.querySelector(".left");
left.addEventListener("click", hideShow);
let main = document.querySelector("main");
let images = main.querySelectorAll("img");
document.addEventListener("contextmenu", (event) => event.preventDefault());
for (item of images) {
  item.addEventListener("click", showImage);
  // item.addEventListener("contextmenu",showWindowfromImage);
}
let whiteWindow = document.querySelector(".window");
document.addEventListener("contextmenu", showWindowfromImage);
document.addEventListener("click", (event) => (whiteWindow.hidden = true));
document.addEventListener("scroll", (event) => (whiteWindow.hidden = true));
window.addEventListener("resize", (event) => (whiteWindow.hidden = true));

Answer 2
  1. Вставить код в Хром
  2. Попытаться выполнить
  3. Ткнуть мышью на строку с ошибкой
  4. Чуть посмотреть окружающий код

READ ALSO
Swiper js: destroy и init в зависимости от ширины экрана?

Swiper js: destroy и init в зависимости от ширины экрана?

Всем приветПодскажите, пожалуйста, как решить проблему

153
Изменить кодировку cmd при старте jar

Изменить кодировку cmd при старте jar

Делаю консольное приложение, которое получает на вход стороку и фильит, а затем выводит по заданному фильтру соответствующие словаПри двойном...

226
вывод в лог русские буквы

вывод в лог русские буквы

Хочу проверить правильность заполнения из проперти и вывожу в логНо там абракадабра непонятная

310