为什么我收到此图像缩放代码的 "Expected an assignment or function call and instead saw an expression" 和 "Missing semicolon"”

Question

我正在做另一个图像缩放项目，再次遇到同样的错误，它在 JS 代码的最后一行指出“期望一个赋值或函数调用，而不是看到一个表达式”。此外，我在 codepen 中收到一条错误消息，指出我缺少分号，即使有分号（除非我将其放在其他地方？）帮助解决此问题将不胜感激！

有点郁闷，同样的错误我遇到了两次又两次，我无法自行解决。我也很想听听我能做些什么来解决这样的问题以及我自己的任何类似问题。

注：

我没有在代码段中添加事件侦听器的代码。

// VARIABLES 
const mainPic = document.querySelector("#pic");
const mainPicContainer = document.querySelector("#mainPictureContainer");
const pic1 = document.querySelector("#pic1");
const pic2 = document.querySelector("#pic2");
const pic3 = document.querySelector("#pic3");
const pic4 = document.querySelector("#pic4");
const pic5 = document.querySelector("#pic5");
const picArr = [
  pic1, 
  pic2,
  pic3,
  pic4,
  pic5
];
let picActive = 1;

const hoverRect = document.querySelector("#hoverRect");
//"zoom window"
const zoom = document.querySelector('#zoom');

//"zoom ratio"
let ratio = 3; 

//"coordinates of mouse cursor"
  let x, y, xx, yy; 


//"Width & height of main picture in px"
let w1 = mainPicContainer.offsetWidth;
let h1 = mainPicContainer.offsetHeight;
//console.log(w1, h1); //420 854

//"width & height of selector"; the hoverbox
let w2 = hoverRect.offsetWidth;
let h2 = hoverRect.offsetHeight; 

//"zoom window bg-img size"
zoom.style.backgroundSize = w1 * ratio + "px " + h1 * ratio + "px "; 

//"zoom window width & height"
zoom.style.width = w2 * ratio + "px";
zoom.style.height = h2 * ratio + "px";


//"1/2 the selector shows outside of main picture; need 1/2 of width & height" (1/2 of the hoverbox)
w2 = w2 / 2;
h2 = h2 / 2;


pic1.classList.add("image-active");


// FUNCTION
//change the image of the mainPic block w/ current img
function changeImage(imgSrc, n){
  //"This will change the main img"
  mainPic.src = imgSrc; 
  //"remove box-shadow style from prev active side picture"
  picArr[picActive - 1].classList.remove('image-active');
  //"add box shadow to active side picture"
  picArr[n - 1].classList.add('image-active');
  //"update active side picture"
  picActive = n;
}

//"moving the selector box" (#hoverRect)
function move(event){
   
  //"how far the mouse cursor from an element"
  x = event.offsetX; //"how far the cursor from left of element"
  y = event.offsetY; //" ... top of element"
 // console.log(x,y);
  
   xx = x * ratio;
 yy = y * ratio; 
  
   //"keeping the selector inside the main picture"
  //"left of main picture"
  if(x < w2){
    x = w2;
  }
  //"right of main picture"
  if(x > w1 - w2){
    x = w1 - w2; 
  }
  //"top..."
  if(y < h2){
    y = h2;
  }
  //"bottom..."
  if(y > h1 - h2){
    y = h1 - h2; 
  }
  /* NOTE TO SELF
  put the if statemnts before the hoverRect.style.left etc etc 
  for some reason, putting it after won't make the hover box stay w/i main picture"*/
  
  //changing position of selector 
  //this is what will make the gray box move & the cursor will follow 
  hoverRect.style.left = x + "px";
  hoverRect.style.top = y + "px";
  
  //"changing bg image of zoom window"
zoom.style.backgroundPosition = '-' + xx + 'px ' + '-' yy + 'px'; //ERROR -
}

//IMAGES
.image-container{
  display: flex;
  flex-wrap: wrap;
  background: lightGray;
  padding: 10px;
  
  div{
    margin: 10px;
    //background: blue;
  }
}
.pictures{
  width: 64px;
 
}
.shoe-image{
  width: 100%;
}


///////// mainPic Div 
.mainPicture{
  width: 500px;//420px;
  height: 500px; //840px;
  position: relative;
  background: yellow;
}
  #pic{
    width: 100%;
}

 /* .explanation{
    position: relative;
    top: -514px;
    height: 100%;
    width: 30px;
    background: blue;

}*/

//HOVER RECT
#hoverRect{
  position: absolute;
  margin: 0 !important;
  padding: 0;
  width: 200px;
  height: 150px;
  background-color: gray;
  transform: translate(-50%, -50%); //this will make the cursor stay in center of the block 
  pointer-events: none; //this will resolve the glitchy movement of cursor 
  opacity: 0.4; //0
}

////////////////
//Zoom 
.zoom{
  position: relative;
  top: 100px;
  left: 20px;
  background-image: url("https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/c3bd9dda9fdd4a7cbc9aad1e00dd0045_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_01_standard.jpg");//pic1
  box-shadow: 0 0 3px black;
}
// JS CLASS
.image-active{
  box-shadow: 0 0 3px gray;
}
.hoverRect-active{
  opacity: 1;
}

<header>
  <div class="banner">
    <span>for educational purposes only</span>
  </div>
</header>

<section class="image-container">
  <div class="pictures">
    <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/c3bd9dda9fdd4a7cbc9aad1e00dd0045_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_01_standard.jpg" alt="side view of shoes" id="pic1" class="shoe-image">
    <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/a8dd72b84eb74a86a460ad1e00dd0db5_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_02_standard_hover.jpg" alt="top view of shoes" id="pic2" class="shoe-image">
    <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/680f4199aa6e4226b539ad1e00dd1513_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_03_standard.jpg" alt="bottom/sole of shoes" id="pic3" class="shoe-image">
    <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/8375f145b0f1441f8c7aad1e00dd0657_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_06_standard.jpg" alt="inner side of shoes" id="pic4" class="shoe-image">
    <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/497f4207b21b4933836bad1e00dd22d9_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_05_standard.jpg" alt="back view of shoes" id="pic5" class="shoe-image">
  </div>
  
  <div class="mainPicture" id="mainPictureContainer">
    <div class="hoverRect" id="hoverRect"></div>
    <img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/c3bd9dda9fdd4a7cbc9aad1e00dd0045_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_01_standard.jpg" alt="side view of shoes" id="pic" >
    <div class="explanation"></div>
  </div> 
  <div class="zoom" id="zoom"></div>
</section>

<button>Show Var Explanation</button>

Answer 1

因为你在 yy

之前最后少了一个 +

zoom.style.backgroundPosition = '-' + xx + 'px ' + '-' + yy + 'px';

更简洁

zoom.style.backgroundPosition = `-${xx}px -${yy}px`;

为什么我收到此图像缩放代码的 "Expected an assignment or function call and instead saw an expression" 和 "Missing semicolon"”

Why am I receiving an "Expected an assignment or function call and instead saw an expression" and a "Missing semicolon" for this image zoom code"

javascript

image

zooming