HTML/JS - Start timer on load-CodePudding

All works great. At the moment, I don't have to press the button to start the timer, it start automatically on page load. Problem is the start, stop and reset buttons still appeared. When I hide the button code the timer not working. When the page load the buttons should not be appeared and timer should work fine.

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <title>30 second countdown timer</title>
  </head>
  <body onl oad="startTimer();">
    <div id="countdown">
      <div id="countdown-number">30</div>
    </div>
    <div >
      <button id="stop">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/pause--v1.png" />
      </button>
      <button id="start">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/play--v1.png" />
      </button>
      <button id="reset">
        <img src="https://img.icons8.com/ios-glyphs/30/000000/stop.png" />
      </button>
    </div>
    <audio id="timeout_audio"></audio>
  </body>
</html>

<script>
  // Select Countdown container
const countContainer = document.getElementById("countdown-number");

// Select action buttons
const startButton = document.getElementById("start");
const stopButton = document.getElementById("stop");
const resetButton = document.getElementById("reset");

// Select timeout Audio element
const timeoutAudio = document.getElementById("timeout_audio");

// variable to store count
var remainingTime = 30;

// variable to store time interval
var timer;

// Variable to track whether timer is running or not
var isStopped = true;

// Function to start Timer
const startTimer = () => {
  if (isStopped) {
    isStopped = false;
    countContainer.innerHTML = remainingTime;
    timer = setInterval(renderTime, 1000);
  }
};

// Function to stop Timer
const stopTimer = () => {
  isStopped = true;
  if (timer) {
    clearInterval(timer);
  }
};

// Function to reset Timer
const resetTimer = () => {
  isStopped = true;
  clearInterval(timer);
  remainingTime = 30;
  countContainer.innerHTML = remainingTime;
};

// Initialize timeout sound
timeoutAudio.src = "http://soundbible.com/grab.php?id=1252&type=mp3";
timeoutAudio.load();

// Attach onclick event to buttons
startButton.onclick = startTimer;
resetButton.onclick = resetTimer;
stopButton.onclick = stopTimer;

// function to display time
const renderTime = () => {
  // decement time
  remainingTime -= 1;
  // render count on the screen
  countContainer.innerHTML = remainingTime;
  // timeout on zero
  if (remainingTime === 0) {
    isStopped = true;
    clearInterval(timer);
    // Play audio on timeout
    timeoutAudio.play();
    remainingTime = 30;
  }
};
</script>
<style>
  body {
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("https://img4.goodfon.com/wallpaper/nbig/1/2e/multfilm-shou-simpsons-personazh-20th-century-fox-art-ris-15.jpg");
}
#countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0e2c4c;
  font-size: 70px;
  width: 200px;
  height: 200px;
  background-color: #e7d9fc;
  border-radius: 50%;
}
.action-list {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}
button {
  border: none;
  background-color: #e7d9fc;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  cursor: pointer;
}
</style>

CodePudding user response：

onload not work because your script load after html document load. means when onl oad call startTimer() this function not created yet.

best way for start automaticly your counter is leave onl oad. and call startTimer(); in end of your script (last line):

<!DOCTYPE html>
<html>

<head>
  <title>30 second countdown timer</title>
  <style>
    body {
      font-family: sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url("https://img4.goodfon.com/wallpaper/nbig/1/2e/multfilm-shou-simpsons-personazh-20th-century-fox-art-ris-15.jpg");
    }

    #countdown {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #0e2c4c;
      font-size: 70px;
      width: 200px;
      height: 200px;
      background-color: #e7d9fc;
      border-radius: 50%;
    }

    .action-list {
      display: flex;
      gap: 30px;
      margin-top: 30px;
    }

    button {
      border: none;
      background-color: #e7d9fc;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      cursor: pointer;
    }
  </style>

</head>

<body>
  <div id="countdown">
    <div id="countdown-number">30</div>
  </div>
  <div >
    <button id="stop">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/pause--v1.png" />
    </button>
    <button id="start">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/play--v1.png" />
    </button>
    <button id="reset">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/stop.png" />
    </button>
  </div>
  <audio id="timeout_audio"></audio>

  <script>



       const countContainer = document.getElementById("countdown-number");

      // Select action buttons
      const startButton = document.getElementById("start");
      const stopButton = document.getElementById("stop");
      const resetButton = document.getElementById("reset");

      // Select timeout Audio element
      const timeoutAudio = document.getElementById("timeout_audio");

      // variable to store count
      var remainingTime = 30;

      // variable to store time interval
      var timer;

      // Variable to track whether timer is running or not
      var isStopped = true;

      // Function to start Timer
      const startTimer = () => {
        if (isStopped) {
          isStopped = false;
          countContainer.innerHTML = remainingTime;
          timer = setInterval(renderTime, 1000);
        }
      };

      // Function to stop Timer
      const stopTimer = () => {
        isStopped = true;
        if (timer) {
          clearInterval(timer);
        }
      };

      // Function to reset Timer
      const resetTimer = () => {
        isStopped = true;
        clearInterval(timer);
        remainingTime = 30;
        countContainer.innerHTML = remainingTime;
      };

      // Initialize timeout sound
      timeoutAudio.src = "http://soundbible.com/grab.php?id=1252&type=mp3";
      timeoutAudio.load();

      // Attach onclick event to buttons
      startButton.onclick = startTimer;
      resetButton.onclick = resetTimer;
      stopButton.onclick = stopTimer;

      // function to display time
      const renderTime = () => {
        // decement time
        remainingTime -= 1;
        // render count on the screen
        countContainer.innerHTML = remainingTime;
        // timeout on zero
        if (remainingTime === 0) {
          isStopped = true;
          clearInterval(timer);
          // Play audio on timeout
          timeoutAudio.play();
          remainingTime = 30;
        }
      };

      startTimer();
 


  </script>

</body>

</html>

CodePudding user response：

So, basically you want that when the page loads, the buttons should not be dispalyed, and the timer should work fine. So, what you can do is, take the div for the buttons, and set its dispaly to none when the timer starts running, and when the timer reaches 0, again set the display to block.

write this in your script

var x = document.getElementsByClassName('action-list')[0];

and in your startTimer function, set the display to none

const startTimer = () => {
  x.style.display = "none";
  // your code for startTimer
};

In your renderTime() function, when the time reaches 0, you can set the display to block

const renderTime = () => {
  remainingTime -= 1;
  countContainer.innerHTML = remainingTime;
  // timeout on zero
  if (remainingTime === 0) {
    isStopped = true;
    clearInterval(timer);
    // set the display to block, so that the buttons appear again
    x.style.display = "block";
    // Play audio on timeout
    timeoutAudio.play();
    remainingTime = 30;
  }
};

CodePudding user response：

Try this: This will not show buttons after loading and highlight the button last pressed and the play button is highlighted by default.

<!DOCTYPE html>
<html>

<head>
  <title>30 second countdown timer</title>
  <style>
    body {
      font-family: sans-serif;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url("https://img4.goodfon.com/wallpaper/nbig/1/2e/multfilm-shou-simpsons-personazh-20th-century-fox-art-ris-15.jpg");
    }

    #countdown {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #0e2c4c;
      font-size: 70px;
      width: 200px;
      height: 200px;
      background-color: #e7d9fc;
      border-radius: 50%;
    }

    .action-list {
      display: flex;
      gap: 30px;
      margin-top: 30px;
    }

    button {
      border: none;
      background-color: #e7d9fc;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      cursor: pointer;
    }
  </style>

</head>

<body>
  <div id="countdown">
    <div id="countdown-number">30</div>
  </div>
  <div >
    <button id="stop">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/pause--v1.png" />
    </button>
    <button id="start">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/play--v1.png" />
    </button>
    <button id="reset">
      <img src="https://img.icons8.com/ios-glyphs/30/000000/stop.png" />
    </button>
  </div>
  <audio id="timeout_audio"></audio>

  <script>

       var x = document.getElementsByClassName('action-list')[0];

       const countContainer = document.getElementById("countdown-number");

      // Select action buttons
      const startButton = document.getElementById("start");
      const stopButton = document.getElementById("stop");
      const resetButton = document.getElementById("reset");

      // Select timeout Audio element
      const timeoutAudio = document.getElementById("timeout_audio");

      // variable to store count
      var remainingTime = 30;

      // variable to store time interval
      var timer;

      // Variable to track whether timer is running or not
      var isStopped = true;

      // Function to start Timer
      const startTimer = () => {

        startButton.style.background = "green";  
        stopButton.style.background = "#e7d9fc"
        x.style.display = "none";
        if (isStopped) {
          isStopped = false;
          countContainer.innerHTML = remainingTime;
          timer = setInterval(renderTime, 1000);
        }
      };

      // Function to stop Timer
      const stopTimer = () => {
        startButton.style.background = "#e7d9fc";  
        stopButton.style.background = "green"
        isStopped = true;
        if (timer) {
          clearInterval(timer);
        }
      };

      // Function to reset Timer
      const resetTimer = () => {
        isStopped = true;
        clearInterval(timer);
        remainingTime = 30;
        countContainer.innerHTML = remainingTime;
      };

      // Initialize timeout sound
      timeoutAudio.src = "http://soundbible.com/grab.php?id=1252&type=mp3";
      timeoutAudio.load();

      // Attach onclick event to buttons
      startButton.onclick = startTimer;
      resetButton.onclick = resetTimer;
      stopButton.onclick = stopTimer;

      // function to display time
      const renderTime = () => {
        // decement time
        remainingTime -= 1;
        // render count on the screen
        countContainer.innerHTML = remainingTime;
        // timeout on zero
        if (remainingTime === 0) {
          isStopped = true;
          clearInterval(timer);
          x.style.display = "block";
          // Play audio on timeout
          timeoutAudio.play();
          remainingTime = 30;
        }
      };

      startTimer();
 


  </script>

</body>

</html>