How to increment and decrement a progress value using HTML5

Posted by Manideepgoud under HTML 5 category on 6/30/2016 | Points: 40 | Views : 4238

Post Code |

Search Codes |

Code Home

In order to increment and decrement a progress bar in HTML5 we need to use javascript, In the below code we have two functions increment() and decrement() with id as "a1" in the <progress> bar, while onclick of the button increment calls increment function with id value to increment 10 using count=count+10 ; In the similar way while onclick of the button decrement calls function decrement() with id value as "a1" which makes count to decrement 10 value using count =count-10;

<!DOCTYPE html>
<html>
<head>
    <title> </title>
</head>
<body>
    <h2> Progress bar</h2>
    <progress value="20" max="100" id="a1"></progress>
    <button onclick="increment()">Increase</button>
    <button onclick="decrement()">Decrease</button>
    <script>
        var count = 0;
        function increment() {
            count = count + 10;
            document.getElementById("a1").value = count;
        }
        function decrement() {
            count = count - 10;
            document.getElementById("a1").value = count;
        }
    </script>
</body>
</html>

Alert Moderator

Bookmark It

Comments or Responses

Latest Code Snipptes