It is necessary that the upper arrow changes the value in input by +1, and the lower one by -1. the minimum value was 0, and the maximum 9. help please example
<ul class="test"> <li class="entering-numbers"> <div class="arrow-up"></div> <div class="arrow-down"></div> <input type="text" value="4" readonly> <label> 123</label> </li> </ul> var input = document.getElementById('input'); var up = document.getElementById('up'); var down = document.getElementById('down'); function isValid(n) { let min = 0; let max = 9; if (n >= min && n <= max) { return true; } return false; } up.addEventListener('click', function(e){ let n = parseInt(input.value); ++n; let val = isValid(n); if(!!val) { input.value = n; console.log("Inc: %d", n); } }); down.addEventListener('click', function(e){ let n = parseInt(input.value); --n; let val = isValid(n); if(!!val) { input.value = n; console.log("Dec: %d", n); } }); .entering-numbers > input { width: 15px; float: left; display: inline-block; margin: 0 10px 40px 0; height: 15px; text-align: center; background-color: #efbd16; border-radius: 2px; border: none; color: #1c1c1c; font-family: GothamPro; font-size: 12px; font-weight: 500; } .entering-numbers > label:after { display: none; } .entering-numbers > label:befor { display: none; } .arrow-up { cursor: pointer; position: absolute; top: 4px; left: 49px; width: 0; height: 0; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-bottom: 9px solid #efbd16; } .arrow-down { cursor: pointer; position: absolute; top: 36px; left: 49px; width: 0; height: 0; border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; border-top: 9px solid #efbd16; } <ul class="test"> <li class="entering-numbers"> <div class="arrow-up" id="up"></div> <div class="arrow-down" id="down"></div> <input type="text" value="4" id="input" readonly> <label> 123</label> </li> </ul> 
Source: https://ru.stackoverflow.com/questions/618449/
All Articles