CodeWalker CodeWalker - 1 year ago 104
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;

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 Source

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>
<progress id="pr" max="100"></progress>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download