<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div div { width: 20px; text-align: center; line-height: 20px; height: 20px; background-color: white; border: 1px solid #000000; cursor: pointer; float: left; } input{ width: 40px; height: 18px; border: 1px solid #000000; border-left: none; border-right:none ; background-color: white; float: left; text-align: center; outline: none; } </style> </head> <body> <div> <div class="subtractBn">-</div> <input type="text" value="1"> <div class="addBn">+</div> </div> <script> var subtractBn=document.querySelector(".subtractBn"); var addBn=document.querySelector(".addBn"); var input=document.querySelector("input"); var sum=1; subtractBn.addEventListener("click",clickHandler); subtractBn.addEventListener("mousedown",clickHandler); addBn.addEventListener("click",clickHandler); addBn.addEventListener("mousedown",clickHandler); input.addEventListener("input",inputHandler); function clickHandler(e) { if(e.type==="mousedown"){ e.preventDefault(); return; } if(this.textContent==="+"){ sum++; if(sum>99) sum=99; }else{ sum--; if(sum<1) sum=1; } input.value=sum.toString(); } function inputHandler(e) { input.value=input.value.replace(/[^0-9]/g,""); if(Number(input.value)>99){ sum=99; input.value=sum; return; } if(Number(input.value)<1){ sum=1; input.value=sum; return; } sum=Number(input.value); } </script> </body> </html>