Input type number should start again from min value with up arrow and max value with down arrow

Question

I have number input,

<input type="number" name="start" id="start" value="0" min="0" max="24" />

so, i want functionality like when i click up arrow till max value(24 here) reaches after that it should start again from 0 and same when reaches limit till min value(0 here) with down arrow, after that it should start with 24.

And also same should work with keyup and keydown arrow.

Any help would be appreciated!

Answer 1

something like this

 function myFunction(){ if(document.getElementById("start").value == 25){ document.getElementById("start").value = 0; } } 

 <input type="number" name="start" id="start" value="0" min="0" max="25" onchange="myFunction()" /> 

If you want to do the same thing if number hits 0 then use this code:

 function myFunction(){ if(document.getElementById("start").value == 25){ document.getElementById("start").value = 0; } if(document.getElementById("start").value == -1){ document.getElementById("start").value = 24; } } 

 <input type="number" name="start" id="start" value="0" min="-1" max="25" onchange="myFunction()" />