JSFiddle - React, Tailwind, and code Playground

by coiscir

HTML

<div>
<input type="text" value="0" id="test-input"/>
<input type="button" value="Up!" class="test-buttons" id="test-up-button" />
<input type="button" value="Reset!" class="test-buttons" id="test-reset-button" />
</div>

CSS

div {
    width: 300px;
    margin: 50px auto 0;
}

#test-input {
    padding: 2px 4px;
}

.test-buttons {
    padding: 3px 8px;
}

JavaScript

var element = $('#test-input');
var interval, timeout;

$('#test-up-button').on({
    mousedown : function(e) {
        element.val(parseInt(element.val()) + 1);
        
        timeout = window.setTimeout(function () {
            interval = window.setInterval(function() {
                element.val(parseInt(element.val()) + 1);
            }, 200);      
        }, 400);
        
        e.preventDefault();        
    },
    mouseup : function() {
        window.clearTimeout(timeout);
        window.clearInterval(interval);
    }
});

$('#test-reset-button').on('click', function(e) {
     element.val(0);           
     e.preventDefault();
});