How to increment and decrement a progress value using HTML5

Manideepgoud
Posted by Manideepgoud under HTML 5 category on | Points: 40 | Views : 4238
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>

Comments or Responses

Login to post response