stepUp(1) , stepDown(1) not working in IE

Question

HTML5 stepUp(1) and stepDown(1) are not working in IE. Here is my code:

<div class = "col-sm-3">
    <div class = "waist">             
        <p class = "waist-measure" id="mens-bottom-waist">Waist</p>
        <a class = "waist-plus btn" onclick="waistPlus()">+</a>
        <a class = "waist-minus btn " onclick="waistMinus()">-</a>
    </div>
</div>

<script>
function waistPlus() {
    document.getElementById("waist").stepUp(1);
}
    function waistPlus() {
    document.getElementById("waist").stepDown(1);
}
</script>

Answer 1

The methods stepUp and stepDown are only defined on <input> elements with type="number" . The element with id="waist" in your document isn't of that type, so the methods don't work.

Answer 2

The methods stepUp and stepDowm are not supported by IE. You can achieve this by using this:

 var my_value = 1; function stepup(){ var cur_val = document.querySelector("#quantity").value; if(cur_val == 1 || cur_val > 1){ //Parse Current Value to Int my_value = (parseInt(cur_val) + 1); document.querySelector("#quantity").value = my_value; } } function stepdown(){ var cur_val = document.querySelector("#quantity").value; if(cur_val > 1){ //Parse Current Value to Int my_value = (parseInt(cur_val) - 1); document.querySelector("#quantity").value = my_value; } }

 <input type="number" id="quantity" autocomplete="off" step="1" value="1"/> <button type="button" onclick="stepup();">StepUp</button> <button type="button" onclick="stepdown();">StepDown</button>

Hope this will help