I'm doing another image zoom project and again have encountered the same error where it states it "expected an assignment or function call and instead saw an expression"in the very last line in JS code. In addition, I have received an error in codepen stating that I am missing a semicolon even though there is a semicolon (unless I'm to put it somewhere else?) Help in resolving this issue would be greatly appreciated!
It is a bit disheartening that I encountered same error twice and twice, I am unable to resolve it on my own. I would also love to hear on what I can do to resolve issues like this and anything similar on my own.
Note:
I haven't added my code for the event listeners in the snippet.
// 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>Because your missing a + at the end before yy
zoom.style.backgroundPosition = '-' + xx + 'px ' + '-' + yy + 'px';
neater and clearer
zoom.style.backgroundPosition = `-${xx}px -${yy}px`;