<!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>
