Run JavaScript after event instead automatically

Question

I am pretty new to JavaScript and have been busting my brains as to why this won't work. I have read and tried many posts (mainly this one, this one, this one and this one) but none have solved my problem.

I am making a site, which is supposed to run certain functions only when triggered (such as on a button-click). This includes a timer and an associated progressbar. So far both basically work, but always start counting down right away after the page loads. I've tried all the suggested answers in the other posts, but

either they stop the functions from working at all (inserting document.getElementById("start_timer").addEventListener('click', [...] before the function line stops both functions from running at all?)
or simply don't have any effect (as seen below).

What am I doing wrong? Thank you so much for your much appreciated help!

My code looks like this (also I have made a JSFiddle):

//onclick event for progressbar
document.getElementById("start_progressbar").onclick = progress;

//progress bar
    function progress(timeleft, timetotal, $element) {
      var progressBarWidth = (timetotal - timeleft) * ($element.width() / timetotal);
      $element.find('div').animate({
        width: progressBarWidth
      }, timeleft == timetotal ? 0 : 1000, "linear"); //.html(timeleft + " seconds to go"); //comment out -html if no text should appear in the progress bar
      if (timeleft > 0) {
        setTimeout(function() {
          progress(timeleft - 1, timetotal, $element);
        }, 1000);
      }
    }

    progress(5, 5, $('#progress_bar')); // put the desired number of secons here


//onclick event for progressbar
document.getElementById("start_timer").onclick = startTimer;

//countdown timer  
      function startTimer(duration, display) {
      var timer = duration,
        minutes, seconds;
      setInterval(function() {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(minutes + ":" + seconds);

        if (--timer < 0) {
          timer = 0; //set to "0" if you want timer to stop, or to same value as time to cycle continously
        }
      }, 1000);
    }

    jQuery(function($) {
      var fiveMinutes = 5 * 1, //put the desired time for the countdown here (format seconds (max60)x multiplier)
        display = $('#countdown_timer');
      startTimer(fiveMinutes, display);
    });

#progress_bar {
  width: 90%;
  height: 23px;
  bottom: 22px;
  left: 50%;
  transform: translate(-50%);
  position: fixed;
  background-color: #0A5F44;
  z-index: 2;
}

#progress_bar div {
  height: 100%;
  text-align: left;
  padding: 0 10px;
  line-height: 23px; /* same as #progressBar height if we want text middle aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

#countdown_timer {
  position: fixed;
  bottom: 14px;
  left: 6%;
  z-index: 3;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">
   <body>
     <button type="button" id="start_progressbar">start the progressbar
     </button>
     <button type="button" id="start_timer">start the timer
     </button>
     <div id="progress_bar">
       <div></div>
     </div>
     <div id="countdown_timer"></div>
   </body>

 </html>

Could you explain why you have two functions and two buttons? Is it not enough to have one of each and when the function is called to have the progressbar making its animation? — trincot, Feb 07 '21 at 12:04
Please describe what you want your program to do, because this looks like a mix of conflicting solutions. What exactly should those buttons accomplish? — trincot, Feb 07 '21 at 12:15

score 0 · Accepted Answer · answered Feb 07 '21 at 11:55

Read the last comment i wrote

//progress bar
    function progress(timeleft, timetotal, $element) {
      var progressBarWidth = (timetotal - timeleft) * ($element.width() / timetotal);
      $element.find('div').animate({
        width: progressBarWidth
      }, timeleft == timetotal ? 0 : 1000, "linear"); //.html(timeleft + " seconds to go"); //comment out -html if no text should appear in the progress bar
      if (timeleft > 0) {
        setTimeout(function() {
          progress(timeleft - 1, timetotal, $element);
        }, 1000);
      }
    }

    progress(5, 5, $('#progress_bar')); // Remove this line as this call the progress function immidiately when code execution

Great! Thanks so much! Got it working by modifying the last line to: `document.getElementById("start_progressbar").addEventListener('click', function (){ progress(5, 5, $('#progress_bar')); });` — Felix, Feb 07 '21 at 13:39

Run JavaScript after event instead automatically

1 Answers1