How to refer to the changed value of the input field?

M

Max Rudik2015-10-20 16:09:37

JavaScript

Max Rudik, 2015-10-20 16:09:37

Good afternoon!
Please help me figure it out: here is a countdown timer with the ability to change the initial countdown time with the "+" and "-" buttons. But the countdown function does not see the value of the input changed by the buttons, but always refers to the statically set value, in the example - the number 3. How can I fix this?

<body>
<p>Pomodoro</p>
<div id="Mytimer"><p><a id="timer" href="javascript:tiktak()">count!</a></p>
<p><input type="text" id="volume" value="3" />vol</p>
</div>

<input type="button" value="+" onClick="inc()">
<input type="button" value="-" onClick="dec()">

<script>
  var ch = document.getElementById("volume").value; //??? не работает!!!	 
    function inc(){ch++;document.getElementById("volume").value = ch;}
    function dec(){ch--;document.getElementById("volume").value = ch;} 	

  var minute = ch;
  var second = minute * 60;
        
        function tiktak(){         
          if(second >= 60){
          minute = Math.floor(second/60);}
          var sec = second - minute*60;
          if(second<60){minute = 0;}
          if(minute<=9){minute = "0" + minute;}
          if(second<=9){sec = "0" + sec;}
          if(document.getElementById){timer.innerHTML = minute + ":" + sec;}
          if(second==00){return false;}
          second--;
          setTimeout("tiktak()", 1000);
        }    
</script>
</body>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Alexey, 2015-10-20
@mvr1976

Like this if I understand correctly: https://jsfiddle.net/sbvobbxt/

D

Denis, 2015-10-20
@Deonisius

jsfiddle.net/8rnvznse/1

<p>Pomodoro</p>
<div id="Mytimer">
    <p><a href="" id="timer">count!</a>
    </p>
    <p>
        <input type="text" id="volume" value="3" />vol</p>
</div>
<input type="button" value="+">
<input type="button" value="-">

var d = document;
d.addEventListener('DOMContentLoaded', function () {
    var inp = d.getElementById('volume'),
        out = d.getElementById('timer'),
        min = 0, seconds = inp.value * 60, timer;

    [].forEach.call(d.querySelectorAll('[type=button]'), function (but) {
        but.addEventListener('click', function () {
            inp.value -= -(this.value + '1');
            (inp.value <= 0) && (inp.value = 0);
        }, false);
    });

    out.addEventListener('click', function (e) {
        e.preventDefault();
        seconds = inp.value * 60;
        clearTimeout(timer);
        tiktak();
    }, false);

    function tiktak() {
        seconds--;
        if (seconds <= 0) {
            out.textContent = 'Finish!';
            clearTimeout(timer);
            return false;
        }
        min = Math.floor(seconds / 60);
        out.textContent = ('0' + min).slice(-2) + ':' + ('0' + (seconds - min * 60)).slice(-2);
        timer = setTimeout(tiktak, 1000);
    }
}, false);