how to increase variable in js by holding a button?

Question

<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Clicker</title>
<script type="text/javascript">

    var score = 1;
}

function increase1()
{
    score=score+1;
    document.getElementById("clickmebtn").value = score;
}
</script>
</head>
<body>

<div id="container"><center><div id="spacer"></div><div id="btiptsish">
<input id="clickmebtn" type="submit" value="0" onmousedown="increase1()" onmouseup="increase1()"><br><br><br><br></r></div></center>
</div>
</body>
</html>

Can I use pure JavaScript to make on hold button variable increase? I want to increase variable named score.

You could add an event listener for 'onmousedown' and then another one for 'onmouseup' — TKoL, Oct 22 '20 at 12:27
[mousedown](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event) [mouseup](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event) [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) [clearInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) — Lionel Rowe, Oct 22 '20 at 12:27
Does this answer your question? [Incrementing value continuously on mouse hold](https://stackoverflow.com/questions/28127507/incrementing-value-continuously-on-mouse-hold) — Heretic Monkey, Oct 22 '20 at 12:43

score 0 · Answer 1 · answered Oct 22 '20 at 12:41

I believe you are hopping something like this-

let score = 0;
let status = false;
const scoreEl = document.querySelector('#score');
const btnEl = document.querySelector('#btn');
let interval = null;

btnEl.addEventListener('mousedown', e => {
  status = true;
  update();
});

btnEl.addEventListener('mouseup', e => {
  status = false;
  update();
});

const update = () => {
  if (status) {
    interval = setInterval(() => {
      score++;
      scoreEl.innerHTML = score;
    }, 100);    
  } else {
    if (interval) clearInterval(interval);
  }
  
}

<div id="score">0</div>
<button id="btn">Increment</button>

If this solves your problem then please accept the answer so that other can get help in future. @ZielonyXD — Sajeeb Ahamed, Oct 22 '20 at 12:59

score 0 · Answer 2 · answered Oct 22 '20 at 12:41

On onmousedown, create a setInterval to call the function every n miliseconds
On onmouseup, remove that interval! (clearInterval)

var interval = null;
var button = document.querySelector("#clickmebtn");
var score = 0;

button.onmousedown = function(){
    addCount(); // Call function right away
    interval = setInterval(addCount, 500); // Start calling every 500ms
};
button.onmouseup = function(){
    clearInterval(interval);  // Clear the interval if button is released
};

// Add 1 to counter and set as button value
function addCount() {
  button.value = ++score;
}

<html>

<head>
    <link rel="stylesheet" href="styles.css">
    <title>Clicker</title>
</head>

<body>
    <div id="container">
        <center>
            <div id="spacer"></div>
            <div id="btiptsish">
                <input id="clickmebtn" type="submit" value="0"><br><br><br><br>
            </div>
        </center>
    </div>
</body>

</html>

score 0 · Answer 3 · edited Oct 23 '20 at 10:52

I'd do this by changing your onmousedown event to [start an interval][1], which calls your increase1() method repeatedly until the [interval is cleared][2] with onmouseup.

You can do this with a busy loop (e.g. while(true)) but that would block the UI thread and your page would become unresponsive. Using intervals avoids this.

Your example, updated to use this approach:

var score = 1;

function increase1() {
    score = score + 1;
    document.getElementById("clickmebtn").value = score;
}

var increaseDelay = 10; // increase score once every 10ms (prevents blocking UI thread with busy loop)
var interval = null;

function turnCounterOn() {
    interval = setInterval(increase1, increaseDelay);
}

function turnCounterOff() {
    clearInterval(interval);
}

<div id="container">
    <center>
        <div id="spacer"></div>
        <div id="btiptsish">
            <input id="clickmebtn" type="submit" value="0" onmousedown="turnCounterOn()"
                onmouseup="turnCounterOff()">
                <br><br><br><br>
        </div>
    </center>
</div>

score 0 · Answer 4 · answered Oct 22 '20 at 12:42

Use the setTimeout to set an interval and loop through it in the onmousedown event listener. I have used a seperate listener in onmouseup to clear the timeout

Below you can change the time in the setTimeout to change the interval between the score increase

var score = 0;
var timer;

function increase1()
{
    timer = setTimeout(function(){
              score=score+1;
              document.getElementById("clickmebtn").value = score;
              
              increase1();
            }, 1000);
}

function stop() {
    clearTimeout(timer);
}

<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Clicker</title>
</head>
<body>

<div id="container"><center><div id="spacer"></div><div id="btiptsish">
<input id="clickmebtn" type="submit" value="0" onmousedown="increase1()" onmouseup="stop()"><br><br><br><br></r></div></center>
</div>
</body>
</html>

how to increase variable in js by holding a button?

4 Answers4