Make the following JavaScript modifications using clearInterval() and setInterval() where appropriate:

Question

Make the following JavaScript modifications using clearInterval() and setInterval() where appropriate:

In startAnimation(), add an if statement that stops the timer with the ID timerId if timerId is not null.

After the if statement in startAnimation() that stops the timer, start a timer that calls moveImage(clickX, clickY) every 10 milliseconds. Save the timer ID in the timerId variable.

Add an if statement in moveImage() that stops the timer with the ID timerId if (imgX, imgY) is equal to (centerX, centerY). Also set timerId to null.

After the modifications are complete, the user should be able to click anywhere in the browser, and the heart will slowly move to the clicked location. If the user clicks on a new location before the heart arrives at the last location, the heart will adjust course and move to the new location.

Here is my code.

I keep get these errors in the photo even though I followed the instrutions

let timerId = null;

window.addEventListener("DOMContentLoaded", function() {
   document.addEventListener("click", startAnimation);
});

function startAnimation(e) {

   // Get mouse coordinates
   let clickX = e.clientX;
   let clickY = e.clientY;  
   
   // TODO: Modify the code below
   if (timerId != null) {
       clearInterval(timerId);
   }
   moveImage(clickX, clickY); 
    timerId = setInterval(moveImage, 10);
};

function moveImage(x, y) {
   const img = document.querySelector("img");
            
   // Determine location of image
   let imgX = parseInt(img.style.left);
   let imgY = parseInt(img.style.top);

   // Determine (x,y) coordinates that center the image 
   // around the clicked (x, y) coords
   const centerX = Math.round(x - (img.width / 2));
   const centerY = Math.round(y - (img.height / 2));

   // TODO: Add code here
    if ((imgX, imgX == centerX) && (imgY == centerY)) {
       clearInterval(timerId);
       timerId = null;
    }
   // Move 1 pixel in both directions toward the click
   if (imgX < centerX) {
      imgX++;
   }
   else if (imgX > centerX) {
      imgX--;
   }
   
   if (imgY < centerY) {
      imgY++;
   }
   else if (imgY > centerY) {
      imgY--;
   }
   
   img.style.left = imgX + "px";
   img.style.top = imgY + "px";
};

I keep get these errors in the photo even though I followed the instructions errors

Answer 1

The errors you're getting are basically saying that the code isn't working, which, if you run the code, you can see.

One handy way to see what's going on with your code is to use console.log and debugger

Note the difference between these two calls:

   moveImage(clickX, clickY); 

and

    timerId = setInterval(moveImage, 10);

In each, you're making the call to moveImage, but in only one of them are you providing arguments for x and y.

We can remedy this by using a higher order function:

let timerId = null;

window.addEventListener("DOMContentLoaded", function() {
  document.addEventListener("click", startAnimation);
});

function startAnimation(e) {

  // Get mouse coordinates
  let clickX = e.clientX;
  let clickY = e.clientY;

  // TODO: Modify the code below
  if (timerId != null) {
    clearInterval(timerId);
  }

  timerId = setInterval(moveImage(clickX, clickY), 10);
};

function moveImage(targetX, targetY) {
  const img = document.querySelector("img");
  return () => {
    // Determine location of image
    let imgX = parseInt(img.getBoundingClientRect().x);
    let imgY = parseInt(img.getBoundingClientRect().y);

    // Determine (x,y) coordinates that center the image 
    // around the clicked (x, y) coords
    const centerX = Math.round(targetX - (img.width / 2));
    const centerY = Math.round(targetY - (img.height / 2));

    // TODO: Add code here
    if ((imgX, imgX == centerX) && (imgY == centerY)) {
      clearInterval(timerId);
      timerId = null;
    }
    // Move 1 pixel in both directions toward the click
    if (imgX < centerX) {
      imgX++;
    } else if (imgX > centerX) {
      imgX--;
    }

    if (imgY < centerY) {
      imgY++;
    } else if (imgY > centerY) {
      imgY--;
    }

    img.style.left = imgX + "px";
    img.style.top = imgY + "px";
  };
  
};

img {
  position: fixed;
}

<img src="https://i.kym-cdn.com/photos/images/facebook/001/136/185/604.jpg" height="20" weidth="20" />

You can use getBoundingClientRect to find the position of the image, and once its position is set to fixed, changing the left and top properties will cause it to move.