How to make heading moving again

    var direction = 'right';
    var offset = 0;

    $("#heading").offset({ left: offset, top: offset });

    var moveHeading = function () {
      if (direction === 'right') {
        $("#heading").offset({ left: offset });
        offset++;
        if (offset > 200) {
          offset = 0;
          direction = 'down';
        }
      } else if (direction === 'down') {
        $("#heading").offset({ top: offset });
        offset++;
        if (offset > 200) {
          offset = 200;
          direction = 'left';
        }
      } else if (direction === 'left') {
        $("#heading").offset({ left: offset });
        offset--;
        if (offset < 0) {
          offset = 200;
          direction = 'up';
        }
      } else if (direction === 'up') {
        $("#heading").offset({ top: offset });
        offset--;
        if (offset < 0) {
          offset = 0;
          direction = 'right';
        }
      }
    };


    let intervalId = setInterval(moveHeading, 30);

    $("#heading").click(function () {
      clearInterval(intervalId);

    });

I’m learning JS basics and want to make heading move after clicking. Have no idea how to do this . can you give me idea how to do it, please?

Move the let intervalId declaration to the top with the rest of the variables.

Move the setInterval call inside the click handler and save the id in intervalId (without redeclaring intervalId)

Now before that (still inside the click handler) check if intervalId has a value, if it does call clearInterval with that value, then reset intervalId to null and return out of the click handler.

thanks a lot , it was helpful :slightly_smiling_face: