New to javascript trying to make an autoclicker

Question

I was able to get the space bar to activate the simple button I made, but I am having problems with having it be looped with setInterval(). Is it because of the eventFire mechanism I utilized? Any help or constructive criticism is welcomed as I am trying to learn. Thanks for your time.

Edit: I was able to find a solution as I apparently was using the setInterval function incorrectly. However I still have an issue with stopping the setInterval loop with clearInterval(timer) E hotkey. Here is the updated code.

"use strict";
// used for Tracking Mouse Position which I will implement later
let mousex;
let mousey;

// Simple Button that logs the amount of times pressed and triggers an animation
function button() {
  const button = document.querySelector(".button");

  function buttonClassRemove() {
    button.classList.remove("active");
  }

  function delay(time, inputFunction) {
    let milliseconds = time;
    setTimeout(function () {
      inputFunction();
    }, milliseconds);
  }
  let i = 0;
  button.addEventListener("click", function () {
    i = i + 1;
    console.log(`Button pressed ${i} times`);
    button.classList.add("active");
    delay(100, buttonClassRemove);
  });
}
// Simulates event
function eventFire(el, etype) {
  if (el.fireEvent) {
    el.fireEvent("on" + etype);
  } else {
    var evObj = document.createEvent("Events");
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

function autoClicker() {
  document.addEventListener("mousemove", () => {
    // Tracking Mouse Position
    mousex = event.clientX; // Gets Mouse X

    mousey = event.clientY; // Gets Mouse Y
    // console.log([mousex, mousey]); // Prints data
  });

  document.body.onkeydown = function (e) {
    // Simulates click mouse event
    // and then loop that functionality with the setInterval function
    let timer = setInterval(function () {
  eventFire(document.getElementById("button1"), "click");
}, 100);

    if (e.keyCode == 32) {
      timer;
      console.log("Space pressed");
    } else if (e.keyCode == 69) {
      // Cancels autoclicker setInterval function
      clearInterval(timer);
      console.log("E pressed");
    }
  };
}

autoClicker();
button();

If I am understanding your question correctly, what you want to do is be able to toggle your timer on and off using `onkeydown`, is that right? — fin444, Jun 18 '21 at 03:44
Yes that is correct. I want to toggle the timer to loop the button click when I press space, and when I press E stop the timer. — Hendrik, Jun 18 '21 at 04:19

score 0 · Accepted Answer · answered Jun 18 '21 at 04:27

0

Your issue is that timer is a local variable. You should define it with var at the start of your program alongside mousex and mousey. As it currently stands, every time you run onkeydown it creates a new instance of the interval, checks whether to cancel it, and then throws away the reference. If you make it a global variable, then you can keep the reference so that you can cancel it at any time.

With this, you should also consider when you are running the interval. If you keep it as-is, your old interval will be overwritten with the new one before you can check to cancel. What you should do instead is something like this:

var timer = null;
document.body.onkeydown = function(e) {
    if (/* start timer */ && timer == null) {
        timer = setInterval(/* ... */);
    } else if (/* end timer */) {
        clearInterval(timer);
        timer = null;
    }
}

answered Jun 18 '21 at 04:27

fin444

725
2
14
27

That solved my problem perfectly. Thank you! Also out of curiosity I was told that I should use let instead of var. Is there a functional difference or certain usecases for each? Would it be okay if I used let instead of var and vice versa? – Hendrik Jun 18 '21 at 04:50
Technically, `var` is for more permanent variables and `let` is for more temporary variables, which only exist within a limited scope (e.g. within a function). In my personal experience, there isn't much difference between the two, so me saying to use `var` could totally be unnecessary, I'm honestly not sure. You can read more about it here: https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var – fin444 Jun 18 '21 at 04:54
Thanks for the info. I'll be sure to check out that link. Have a good day. – Hendrik Jun 18 '21 at 05:00

New to javascript trying to make an autoclicker

1 Answers1