Dynamic value of HTML5 progress bar upon button click

Question

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 1

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>

Answer 2

You are using wrong code for this. value is not any object to call parseInt() function.

Using getElementsByTagName you will get array for DOM elements. Below is the changes in your code:

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


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