单击按钮时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返回一个类似数组的对象。

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>