函数计时器返回未定义的img

Question

I am successfully finding redefining and adding an ID to an img without an ID for the purpose of zooming in on hover with the following, but after the timer is called this line of code returns something undefined. That is the problem, this line of code returns undefined after the timer runs, then the zoom no longer works. I am wondering how the following below can re-asses and work on a timer, in case the img src changes. It works properly the first time, then on refresh it does not.

document.getElementsByClassName("ProductItem-gallery-slides-item-image")[0].id="xximage";

The function looks like this from W3 zoom tutorial:

     function imageZoom(imgID, resultID) {
  var img, lens, result, cx, cy;
  img = document.getElementById(imgID);
 var picturea = document.getElementsByClassName("ProductItem-gallery-slides-item-image");
  // alert(picturea);
  result = document.getElementById(resultID);
  /*create lens:*/
  lens = document.createElement("DIV");
  lens.setAttribute("class", "img-zoom-lens");
  /*insert lens:*/
  img.parentElement.insertBefore(lens, img);
  /*calculate the ratio between result DIV and lens:*/
  cx = result.offsetWidth / lens.offsetWidth;
  cy = result.offsetHeight / lens.offsetHeight;
  /*set background properties for the result DIV*/
  result.style.backgroundImage = "url('" + img.src + "')";
  result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
  /*execute a function when someone moves the cursor over the image, or the lens:*/
  lens.addEventListener("mousemove", moveLens);
  img.addEventListener("mousemove", moveLens);
  /*and also for touch screens:*/
  lens.addEventListener("touchmove", moveLens);
  img.addEventListener("touchmove", moveLens);
  function moveLens(e) {
    var pos, x, y;
    /*prevent any other actions that may occur when moving over the image*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = getCursorPos(e);
    /*calculate the position of the lens:*/
    x = pos.x - (lens.offsetWidth / 2);
    y = pos.y - (lens.offsetHeight / 2);
    /*prevent the lens from being positioned outside the image:*/
    if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
    if (y < 0) {y = 0;}
    /*set the position of the lens:*/
    lens.style.left = x + "px";
    lens.style.top = y + "px";
    /*display what the lens "sees":*/
    result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = img.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}

Calling the function with:

    imageZoom("xximage", "myresult");

It is all placed within a timer:

var myVar = setInterval(myTimer, 15000);
var set=0;
function myTimer() {

CODE ABOVE INSIDE THIS

 }

Answer 1

found your example on https://www.w3schools.com/howto/howto_js_image_zoom.asp

I don't think it would make a difference if you use a timer on the code or not, once you use the code it's always turned on no need to keep turning it on with timer, so it won't make a difference.

I tried with timer and it works the same without a timer no errors.

Replace these 2 lines

 img = document.getElementById(imgID);
 var picturea = document.getElementsByClassName("ProductItem-gallery-slides-item-image");

with

 img = document.getElementsByClassName(imgID)[0];
 // alert(img);

If you want to keep the original code this image

<img class="ProductItem-gallery-slides-item-image" data-load="false" data-src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image-dimensions="750x1124" data-image-focal-point="0.5,0.5" data-position-mode="standard" data-parent-ratio="0.7" alt="White" src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg?format=500w" style="font-size: 0px; left: -0.312278px; top: 0px; width: 327.625px; height: 491px; position: relative;" id="yui_3_17_2_1_1530976058504_955" data-image-resolution="500w">

Has the id id="yui_3_17_2_1_1530976058504_955"

 var myVar = setInterval(myTimer, 1500); var set=0; function myTimer() { imageZoom("ProductItem-gallery-slides-item-image", "myresult"); } function imageZoom(imgID, resultID) { var img, lens, result, cx, cy; img = document.getElementsByClassName(imgID)[0]; result = document.getElementById(resultID); /*create lens:*/ lens = document.createElement("DIV"); lens.setAttribute("class", "img-zoom-lens"); /*insert lens:*/ img.parentElement.insertBefore(lens, img); /*calculate the ratio between result DIV and lens:*/ cx = result.offsetWidth / lens.offsetWidth; cy = result.offsetHeight / lens.offsetHeight; /*set background properties for the result DIV*/ result.style.backgroundImage = "url('" + img.src + "')"; result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px"; /*execute a function when someone moves the cursor over the image, or the lens:*/ lens.addEventListener("mousemove", moveLens); img.addEventListener("mousemove", moveLens); /*and also for touch screens:*/ lens.addEventListener("touchmove", moveLens); img.addEventListener("touchmove", moveLens); function moveLens(e) { var pos, x, y; /*prevent any other actions that may occur when moving over the image*/ e.preventDefault(); /*get the cursor's x and y positions:*/ pos = getCursorPos(e); /*calculate the position of the lens:*/ x = pos.x - (lens.offsetWidth / 2); y = pos.y - (lens.offsetHeight / 2); /*prevent the lens from being positioned outside the image:*/ if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;} if (x < 0) {x = 0;} if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;} if (y < 0) {y = 0;} /*set the position of the lens:*/ lens.style.left = x + "px"; lens.style.top = y + "px"; /*display what the lens "sees":*/ result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*consider any page scrolling:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } 

 * {box-sizing: border-box;} .img-zoom-container { position: relative; } .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; /*set the size of the lens:*/ width: 40px; height: 40px; } .img-zoom-result { border: 1px solid #d4d4d4; /*set the size of the result div:*/ width: 300px; height: 300px; } 

 <img class="ProductItem-gallery-slides-item-image" data-load="false" data-src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg" data-image-dimensions="750x1124" data-image-focal-point="0.5,0.5" data-position-mode="standard" data-parent-ratio="0.7" alt="White" src="https://static1.squarespace.com/static/58068e2f5016e12d2c5502ff/5807a2df8419c2ae30bc4d69/5a3dd5740852297f08f5a12c/1529335692585/White-Goldie-V-neck-Tee.jpg?format=500w" style="font-size: 0px; left: -0.312278px; top: 0px; width: 327.625px; height: 491px; position: relative;" id="yui_3_17_2_1_1530976058504_955" data-image-resolution="500w"> <div id="myresult" class="img-zoom-result"></div>