JSFiddle - React, Tailwind, and code Playground

by dikucher

HTML

<input type="text" id="timerdigit" value="">

<button id="nextbtn">NEXT</button>
<button id="nextbtn">PREV</button>

CSS

input {
  border: 1px solid #000;
  color: #000;
  font-size: 20px;
}

JavaScript

var timer_is_on = 0;

$(window).scroll(function() {
  var contentHeight = $('.l-content--body').height();
  var scroll = $(window).scrollTop();
  var scrollHeight = scroll + 350;
  var t,
    next_c = 10;

  function timedCount() {
    document.getElementById("timerdigit").value = next_c;
    next_c = next_c - 1;

    if (next_c == 0) {
      console.log('finish and do my function')
    } else {
      t = setTimeout(function() {
        timedCount()
      }, 1000);
    }
  }

  function startCount() {
    timedCount();
  }

  function stopCount() {
    clearTimeout(t);
  }
  
  document.getElementById("nextbtn").on('click', function(){
  timer_is_on = 1;
    console.log('V I K T O R Y');
    console.log('timer_is_on =' + timer_is_on);
    timedCount();
  });


  if ((scrollHeight > contentHeight) && timer_is_on == 0) {
    timer_is_on = 1;
    console.log('V I K T O R Y');
    console.log('timer_is_on =' + timer_is_on);
    timedCount();

  }
  if ((scrollHeight < contentHeight) && timer_is_on == 1) {
    clearTimeout(t);
    timer_is_on = 0;
    next_c = 10;
    console.log(' E L S E');
  }






  //var myVar = setInterval(myTimer, 1000);
  /*
    function myTimer() {
    var d = new Date();
    document.getElementById().innerHTML = d.toLocaleTimeString();
  }
  */

});