How to resolve this particular "Expected an assignment or function call and instead saw an expression." for JS image zoom?

Question

To understand how image zooming works with JS, I have followed the code from kennethknudsen: enter link description here with some minor changes (all credit of the code goes to the original coder of course.)

However, the code doesn't seem to run giving the error, "Expected an assignment or function call and instead saw an expression" for the ternary condition. It gives the same error on the original code but seems to run the code just fine whereas mines does not. How would one resolve this issue, and what I should do when I encounter another error like this ie. "expected an assignment.. saw an expression" in the future? One forum on codegrepper mentioned to include return() within the code block but I'm not sure if that would apply (and where to apply) to this current issue.

//IMAGE2 FUNCTIONS
const image2 = document.querySelector(".zoom");

function zoom(e){
  let zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX;
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX;
  x = offsetX / zoomer.offsetWidth * 100;
  y = offsetY / zoomer.offsetHeight * 100;
  zoomer.style.backgroundPosition  = x + "%" + y + "%";
}

image2.addEventListener('mouseenter',function(e){
  zoom(event);
});

.image2-container{
  background-position: 50% 50%;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.image2{
  transition: opacity 0.5s; 
  display: block;
  width: 100%;
  
  &:hover{
  opacity: 0;
  }
}

<div class="image2-container zoom">
  <img class ="image2"src="https://media-spring.cabionline.com/wp-content/uploads/cabi-templates/s21/looks/casual-2.jpg"  alt="">
    
  </div>

Answer 1

You need to

1. give the container a background-image of the image you're zooming, as in the other demo, so that there are two elements with the image. If only the <img> has it, it won't work.

2. the warning you're getting is because you're abusing the conditional operator as a replacement for if/else. This:

e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX;

should be either

if (e.offsetX) offsetX = e.offsetX;
else offsetX = e.touches[0].pageX;

or, even better

offsetX = e.offsetX || e.touches[0].pageX;

or, even better, don't implicitly create global variables:

const offsetX = e.offsetX || e.touches[0].pageX;

3. The e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX; looks like a typo - refer to .pageY and .offsetY there, not to .pageX and .offsetX

document.querySelector('.zoom').addEventListener('mousemove', zoom);

function zoom(e) {
  const zoomer = e.currentTarget;
  const offsetX = e.offsetX || e.touches[0].pageX;
  const offsetY = e.offsetY || e.touches[0].pageY;
  x = offsetX / zoomer.offsetWidth * 100
  y = offsetY / zoomer.offsetHeight * 100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}

.zoom img:hover {
  opacity: 0;
}

.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}

<div class="zoom" style="background-image: url(https://media-spring.cabionline.com/wp-content/uploads/cabi-templates/s21/looks/casual-2.jpg)">
  <img src="https://media-spring.cabionline.com/wp-content/uploads/cabi-templates/s21/looks/casual-2.jpg" />
</div>