<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>-</button><input type="text"><button>+</button><br>
<button>-</button><input type="text" class="san"><button>+</button><br>
<button>-</button><input type="text" class="san"><button>+</button><br>
<button>-</button><input type="text" class="kom"><button>+</button><br>
<button>-</button><input type="text"><button>+</button><br>
<button>-</button><input type="text" class="chas"><button>+</button><br>
<button>-</button><input type="text"><button>+</button><br>
<script>
var sklon = (n, obj) => n+" "+obj[(n%100>4 && n%100<20)?2:[2, 0, 1, 1, 1, 2][(n%10<5)?n%10:5]];
var obj = {kom:['комната', 'комнаты', 'комнат'],
san:['санузел', 'санузла', 'санузлов'],
chas:['час', 'часа', 'часов']},
inp = document.querySelectorAll('.san, .kom, .chas');
inp.forEach((el, i)=>{
el.value = 0;
var val, cl = el.className;
el.previousElementSibling.onclick = e => {
val = parseInt(el.value);
if (val > 0) val--;
el.value = sklon(val, obj[cl]);
};
el.nextElementSibling.onclick = e => {
val = parseInt(el.value);
val++;
el.value = sklon(val, obj[cl]);
};
el.onchange = e => {
val = parseInt(el.value);
e.target.value = sklon(val, obj[cl]);
};
});
</script>
</body>
</html>
вместо класса можно использовать любые другие доступные атрибуты.
