Динамическое значение индикатора выполнения 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: Это мое первое сообщение здесь, как мне сделать код ярким и красивым?

Edit: Похоже, код стал красочным все само собой :)

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>

Answer 2

Вы используете неправильный код для этого. value не является объектом вызова функции 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>