CodeWalker CodeWalker - 1 month ago 12
Javascript Question

Dynamic value of HTML5 progress bar upon button click

I'm trying to update the value of a HTML5 progress bar upon entering a value in a text area and clicking a button. I'm assuming that I will only be entering properly formatted integer numbers in the text area.

Here is the html:

<textarea id="txt" cols=20 rows=1 placeholder="Enter total time"></textarea>
<button onclick="myFunction()">Save</button>
<progress id="pr"></progress>


Here is the javascript:

function myFunction()
{
var value = document.getElementById('txt').value;
document.getElementsByTagName("PROGRESS").setAttribute("value",value.parseInt());
};


This doesn't seem to work. Any help is appreciated.

PS: This is my first post here, how do I make the code all colorful and pretty?

Edit: Seems like the code became colorful all by itself :)

Answer

Two things: You were missing a range for the bar and getElementsByTagName returns an array like object.

function myFunction() {
  var value = document.getElementById('txt').value;
  document.getElementsByTagName("PROGRESS")[0].setAttribute("value", value);
}
<input id="txt" placeholder="Enter total time">
<button onclick="myFunction()">Save</button>
<br/>
<progress id="pr" max="100"></progress>

Comments