JSFiddle - React, Tailwind, and code Playground

by Husar

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;

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

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