Managing attributes of a progress tag by button click in JavaScript

We have seen how HTML5 progress tag is used to display status of a process. Here we will learn how to manage attributes of progress tag using JavaScript.

Linking value attribute to button click.

We will keep one button and onClick event of the button will trigger a function. The function will increase the value of progress tag by 10.

Displaying Progress Bar

HTML5 gives us this tag and by using this we can create a progress bar.

<progress value="50" max="100" id=p1>50%</progress>

This progress bar has two main attributes. One is value and other one is maximum attribute. We can read the present value of the progress bar and we can set them to a new value.

Button onClick

We will display the button and onClick of the button we will execute the JavaScript function incr();

<input type=button value='Increse' onClick='incr();'>

JavaScript Function incr()

Inside this function first we will try to read the present value attribute.

var v1=document.getElementById('p1').value;

Now we will set the new value by adding 10 to it.

document.getElementById("p1").value= v1 + 10;

The total function code is here.

<script language=JavaScript>

</script>

Now each click of the button, the JavaScript function incr() will increase the progress bar value by 10.

Demo of increasing value by button click

Here is the complete code. Here is the source of this.

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title> </title>
<script language=JavaScript>

</script>
</head>
<body >

<progress value="50" max="100" id=p1>50%</progress>
<input type=button value='Increse' onClick='incr();'>
</body>
</html>

You can try to add one more button to decrease the value and also display a message saying end of the process ( when value equals to Max attribute )

Subscribe to our YouTube Channel here

Managing value attribute of progress tag by button click