Mousedown hold event on JavaScript

I am polishing up the functionality of my Pomodoro Clock challenge for and have come across issues, thus I decided to start documenting them.


a Pomodoro clock where a user can increase/decrease lengths of time
  1. Click on + and - buttons to increase/decrease time values in minutes.
  2. Functions addTime() and subtractTime() are called when +/- anchor (<a>) elements are clicked:
//snippet of code. Incomplete.
plus[0].addEventListener("click", addTime);
plus[0].addEventListener("mousedown", holdThis);
plus[0].addEventListener("mouseup", holdThis);
function addTime(s) {
console.log(s); //see image below
console.log(this); //see image below
switch( {
//it does stuff here
function holdThis(e) {
let intervalID;
(e.type === "mousedown" ? holdAdd(this) : letGoAdd(this));
function holdAdd(s) {
intervalID = setTimeout(addTime(s), 1000);
function letGoAdd() {

3. When addTime() is executed, it uses this to detect the id of the element before it. In this case, the id of the spans whose texts are 26 and 5 from the first image. It is used to increment time values.

4. When holdThis() is executed, it passes e (or event) as an argument. It then detects whether e.type is a mousedown or a mouseup and executes the appropriate functions.


To be able to hold mousedown and automatically increase or decrease values until mouseup occurs.


a) As it turns out, the this inside addTime() does not work when the function is called through holdAdd(). I passed this from holdAdd() to addTime() as s to try to capture the <a> element.

console.log(s) result on mousedown.

Why is not working?

console.log(this) result when holdThis() is called.

this referred to <a class=”plus”>+</a> when plus gets clicked and calls addTime() directly, but when addTime() gets called inside holdThis() and holdAdd(), then this now refers to the Window object.


Still a work-in-progress. This post will be updated once I figure it out. It probably is such an obvious one.


Final solution:

let intervalID = null;

function holdThis(e) {
(e.type === "mousedown" ? holdAdd(this) : letGoAdd());
function holdAdd(s) {
intervalID = setInterval(function() {
}, 500);
function letGoAdd() {
intervalID = null;


Big mistake: Using setTimeout. Change setTimeout to setInterval.

To be able to call addTime(), you need to call it inside an anonymous function. Please see for reference. intervalID needs to be outside the function for clearInterval to work.