Хочу нарисовать прогресс бар, который будет увеличиваться в ширине исходя из текущих значений инпутов.
Складываем значения инпутов и получаем шаг step. Определяем процент шага от порогового значения и на этот процент увеличиваем ширину прогресс бара. Но взамен получаю 0 вместо новой ширины. Почему так?
<form action="" class="form">
<div class="input-field">
<span>New temperature in freezer</span>
<input id="inputFreezeTemp" type="number" class="input" min="-50" max="0" value="-15">
</div>
<div class="input-field">
<span>New overall temperature</span>
<input id="inputOverallTemp" type="number" class="input" min="-20" max="0" value="-5">
</div>
</form>
<div id="progressBar" class="progress-bar"></div>
.progress-bar {
width: 0;
height: 20px;
background: red;
}
//получаем значения из инпутов
var inputFreezeTemp = document.getElementById("inputFreezeTemp");
var inputOverallTemp = document.getElementById("inputOverallTemp");
function getCurrentTemps() {
var array = {
inputFreezeTemp: inputFreezeTemp.innerHTML,
inputOverallTemp: inputOverallTemp.innerHTML
}
return array;
}
var valueX = 1000; // некое абстрактное пороговое значение
var valueCurrent = 0;
var progressBar = document.getElementById("progressBar");
// через определенные промежутки времени пересчитываем ширину и заносим ее в стили прогресс бара
setInterval(function() {
if (valueCurrent <= valueX) {
var currentTemps = getCurrentTemps();
//некая абстрактная скорость увеличения, берется из инпутов
var step = (-currentTemps.inputFreezeTemp) + (-currentTemps.inputOverallTemp);
var per = step / valueX;
valueCurrent += step;
progressBar.style.width += per * 100 + '%';
// в консоли выводится 0
console.log(progressBar.style.width);
}
}, 3000);
https://jsfiddle.net/wpx1xy62/1/UPD: https://jsfiddle.net/wpx1xy62/3/ 
