change recursive function variable 'onchange' with pure js

Question

I have a page like this (body tag has onload="doInit();"):

function doInit() {
    var end = new Date();
    var tday = new Date();

    var full = 540;
    end.setHours(18, 0, 0);

    function updateTime() {
        var now = new Date(),
     time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds(),
     remaining = end - now,

     _second = 1000,
     _minute = _second * 60,
     _hour = _minute * 60,
     _day = _hour * 24,

     lwidth = document.getElementById('rng').value,

     hours = Math.floor((remaining % _day) / _hour);
     minutes = Math.floor((remaining % _hour) / _minute);
     seconds = Math.floor((remaining % _minute) / _second);

     document.getElementById('remain').innerHTML = ' ';
     document.getElementById('remain').innerHTML += hours + 'h ';
     document.getElementById('remain').innerHTML += minutes + 'm ';
     document.getElementById('remain').innerHTML += (seconds + 1) + 's';

     var current = (full - (hours * 60) - minutes) / full * 100;
        document.getElementById('progress').style.height = lwidth;
     document.getElementById('progress').innerHTML = current.toFixed(1) + '%';
     document.getElementById('progress').style.width = current + "%";

     setTimeout(updateTime, 1000);
    }
    updateTime();
}

doInit();

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#progress {
    height: 14px;
    background-color: orange;
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    color: black;
    font-weight: bold;
}

#remain {
    width: 100px;
    height: 14px;
    color: black;
    margin-top: 10px;
    font-size: 12px;
    background-color: cyan;
}

#rng {
    margin-top: 50px;
}

<div id="progress"> </div>
<div id="remain"></div>
<input id='rng' type="range" name="" min="10" max="20" value="15" step="1">

updateTime() function updates the remain time, shows the current progress and checks the input range value for setting progressbar height. But I don't want it to check the input every second because the progressbar height is not often changed, so it's not necessary. I want the height to be changed when I change the input range value, but not checking the value every second.

P.S. also I'd like the height to be changed instantly (not wainting a second for updateTime to be called).

Your formatting is a little crazy, you'll probably do better if this was easier to read. — Evan Knowles, Mar 12 '18 at 11:09
Possible duplicate of [Detecting input change in jQuery?](https://stackoverflow.com/questions/6458840/detecting-input-change-in-jquery) — Justinas, Mar 12 '18 at 11:16

score 1 · Accepted Answer · answered Mar 12 '18 at 11:53

I want the height to be changed when I change the input range value

The value you want to change in the onchange listener is not used or needed in your recursion. Therefore, you can just use an event listener and handle changes outside the updateTime function.

I sanitised your code and added the listener:

function doInit() {
 var progress = document.getElementById('progress');
 var remain = document.getElementById('remain');
 var range = document.getElementById('rng');
 
    var end = new Date();
    var full = 540;
    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
 
    end.setHours(18, 0, 0);

    function updateTime() {
        var now = new Date();
     var time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
     var remaining = end - now;

     var hours = Math.floor((remaining % _day) / _hour);
     var minutes = Math.floor((remaining % _hour) / _minute);
     var seconds = Math.floor((remaining % _minute) / _second);

     remain.innerHTML = ' ';
     remain.innerHTML += hours + 'h ';
     remain.innerHTML += minutes + 'm ';
     remain.innerHTML += (seconds + 1) + 's';

     var current = (full - (hours * 60) - minutes) / full * 100;
     progress.innerHTML = current.toFixed(1) + '%';
     progress.style.width = current + "%";

     setTimeout(updateTime, 1000);
    }

    range.addEventListener('input', function() {
     var lwidth = range.value;
        progress.style.height = lwidth + "px";
    });

    updateTime();
}

   doInit();

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

#progress {
    height: 14px;
    background-color: orange;
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    color: black;
    font-weight: bold;
}

#remain {
    width: 100px;
    height: 14px;
    color: black;
    margin-top: 10px;
    font-size: 12px;
    background-color: cyan;
}

#rng {
    margin-top: 50px;
}

<div id="progress"> </div>
<div id="remain"></div>
<input id='rng' type="range" name="" min="10" max="20" value="15" step="1">

change recursive function variable 'onchange' with pure js

1 Answers1