Is there a way to run a function on mouse hovering until a certain condition is met?-CodePudding

function increase (element) {
    count = Number(element.innerText)
    count  = 1
    element.innerText = count
}
function decrease (element) {
    count = Number(element.innerText)
    count -= 1
    element.innerText = count
}

    <div  id="textboxjs1" onm ouseover="decrease(textboxEl2),decrease(textboxEl3),decrease(textboxEl4),decrease(textboxEl5),decrease(textboxEl6)"> < Prev </div>
    <div  id="textboxjs2" onclick="increase(textboxEl2)"> 1 </div>
    <div  id="textboxjs3" onclick="increase(textboxEl3)"> 2 </div>
    <div  id="textboxjs4" onclick="increase(textboxEl4)"> 3 </div>
    <div  id="textboxjs5" onclick="increase(textboxEl5)"> 4 </div>
    <div  id="textboxjs6" onclick="increase(textboxEl6)"> 5 </div>
    <div  id="textboxjs7" onm ouseover="increase(textboxEl2), increase(textboxEl3), increase(textboxEl4), increase(textboxEl5), increase(textboxEl6)"> Next > </div>

Hello, is there any way I can make the numbers go up WHILE I keep my mouse hovering on the " Next " button? This is the code I came up with but it only increases once, when my mouse enters the area, I want to make it continuously increase until I take my mouse out, how can I do that? Hopefully this isn't too messy, I'm only 2 days into programming :)

CodePudding user response：

You need to use onmouseenter and onmouseleave event handlers and setInterval and clearInterval timer functions.

const textboxEl2 = document.getElementById('textboxjs2');
const textboxEl3 = document.getElementById('textboxjs3');
const textboxEl4 = document.getElementById('textboxjs4');
const textboxEl5 = document.getElementById('textboxjs5');
const textboxEl6 = document.getElementById('textboxjs6');
let decrementTimer = null;
let incrementTimer = null;

function increase(element) {
    count = Number(element.innerText)
    count  = 1
    element.innerText = count
}

function decrease(element) {
    count = Number(element.innerText)
    count -= 1
    element.innerText = count
}

function decreaseAll() {
    decrease(textboxEl2);
    decrease(textboxEl3);
    decrease(textboxEl4);
    decrease(textboxEl5);
    decrease(textboxEl6);
}

function increaseAll() {
    increase(textboxEl2);
    increase(textboxEl3);
    increase(textboxEl4);
    increase(textboxEl5);
    increase(textboxEl6);
}

function decrementMouseEnterHandler() {
    decrementTimer = setInterval(function aMomentLater() {
        decreaseAll();
    }, 100);
}

function decrementMouseLeaveHandler() {
    clearInterval(decrementTimer);
}

function incrementMouseEnterHandler() {
    incrementTimer = setInterval(function aMomentLater() {
        increaseAll();
    }, 100);
}

function incrementMouseLeaveHandler() {
    clearInterval(incrementTimer);
}

<div  id="textboxjs1" 
  onm ouseenter="decrementMouseEnterHandler()"
  onm ouseleave="decrementMouseLeaveHandler()"
  >&#60; Prev</div>

<div  id="textboxjs2" onclick="increase(textboxEl2)"> 1 </div>
<div  id="textboxjs3" onclick="increase(textboxEl3)"> 2 </div>
<div  id="textboxjs4" onclick="increase(textboxEl4)"> 3 </div>
<div  id="textboxjs5" onclick="increase(textboxEl5)"> 4 </div>
<div  id="textboxjs6" onclick="increase(textboxEl6)"> 5 </div>

<div  id="textboxjs7" 
    onm ouseenter="incrementMouseEnterHandler()"
    onm ouseleave="incrementMouseLeaveHandler()"
  >Next &#62;</div>

Here is a fiddle.

CodePudding user response：

I made a stripped down example to show the point on the increment side of your logic.

Each div has two event handlers: mouseover and mouseout

When the mouse is over an element, it starts incrementing at a given time interval (defined by increaseSpeed) and the timer gets stored in an element data attribute.

When the mouse is out of an element, that timer gets retrieved from the data attribute of that element and it gets cleared so that it will stop running.

From MDN:

var increaseSpeed = 1;

//increseas the number contained inside the element passed
function increase (element) {
    count = parseInt(element.innerText);
    element.innerText =   count;
}

//starts increasing the content of the element hold in this
function startIncreasing(){
  let o = setInterval( () => increase(this), increaseSpeed);
  this.setAttribute('data-timer', o);
}

//stops increasing the content of the element hold in this
function stopIncreasing(){
  let o = this.getAttribute('data-timer');
  clearInterval(o);
}

//adds event handlers for all divs matching .target
const targetDivs = document.querySelectorAll('.target');
for(let e of targetDivs){
  e.addEventListener('mouseover', startIncreasing);
  e.addEventListener('mouseout', stopIncreasing);
}

.textbox{
  border: solid 1px black;
  width: 10em;
  margin-bottom: 1em;
  cursor: pointer;
}

<div  id="textboxjs1">
&lt; Prev
</div>

<div  id="textboxjs2">1</div>
<div  id="textboxjs3">2</div>
<div  id="textboxjs4">3</div>
<div  id="textboxjs5">4</div>
<div  id="textboxjs6">5</div>

<div  id="textboxjs7">
Next &gt;
</div>