按下按钮时HTML5进度条的动态值

Question

当在文本区域输入值并单击按钮时，我试图更新HTML5进度条的值。我假设我只会在文本区域输入格式正确的整数。

以下是html：

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

以下是javascript：

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

这似乎不管用。任何帮助都是非常感谢的。

PS:这是我在这里的第一篇文章，我怎样才能让代码变得五彩缤纷、漂亮呢？

编辑:似乎代码本身就变得五彩缤纷:)

Answer 1

有两件事:您丢失了条形图的一个范围，getElementsByTagName返回一个类似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

您对此使用了错误的代码。值不是调用parseInt()函数的任何对象。

使用getElementsByTagName，您将获得DOM元素的数组。下面是代码中的更改：

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>