Как активировать автоматическое увеличение/уменьшение текста?

Question

Есть функция, которая увеличивает/уменьшает текст при нажатии на соответствующую кнопку. Проблема заключается в том, что я хочу, чтобы текст увеличивался/уменьшался до тех пор, пока на кнопке зажата ЛКМ(левая кнопка мыши). Как это реализовать?

HTML

<div>
    <button id="up">Кликните, чтобы увеличить размер шрифта</button>

    <button id="down">Кликните, чтобы уменьшить размер шрифта</button>

    <h1>Lorem ipsum,</h1> 
    <h2>dolor sit amet consectetur adipisicing elit.</h2> 
    <h3>Accusantium nemo,</h3> 
    <h4>in maiores aspernatur,</h4> 
    <h5>a dignissimos corporis deserunt voluptatum suscipit ab dolorum!</h5> 
    <h6>Quibusdam, sed obcaecati.</h6> 
    <p>Laborum nisi quae labore ducimus dignissimos?</p>
</div>

JS

let html = document.documentElement;
    up.onclick = function() {
        //при помощи JS увеличить размер шрифта html на 2px
        html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
    };

    down.onclick = function() {
        html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) - 2 + 'px';
    };

Answer 1

двигайтесь в этом направлении

let ex = document.getElementById("ex");
let btn = document.getElementById("btn");
let h = null;

//нажали кнопку
btn.onmousedown = function(e){
   //запстили таймер
   h = setInterval(function(){
          //изменили шрифт
          ex.value = (+ex.value || 0) + 1;
      }, 50);
};
// отжали кнопку
btn.onmouseup = function(){
    //убрали таймер
    clearInterval(h);
}

<input id="ex"/>
<button id="btn">&plus;</button>

отпустить мышь можно и вне кнопки, поэтому данное поведение тоже следует обработать соответствующим образом

БЛОГ НА HUSL

Как активировать автоматическое увеличение/уменьшение текста?

Ответы (1 шт):