CODEWITHSUNDEEP
javascriptjqueryhtml
TwoThumbSticks
TwoThumbSticks

Reputation: 1136

Javascript counter function onload not working

I am trying modify this fiddle so that it starts the counter onload, but when I use onload on the body tag it doesn't seem to be working. What did I miss? It seems the code is straight forward. Below is the original fiddle Original fiddle

var timer = document.getElementById("timer");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var resume = document.getElementById("resume");
var id;
var value = "00:00";

startTimer(m, s)

function startTimer(m, s) {
  timer.textContent = m + ":" + s;
  if (s == 0) {
    if (m == 0) {
      return;
    } else if (m != 0) {
      m = m - 1;
      s = 60;
    }
  }

  s = s - 1;
  id = setTimeout(function() {
    startTimer(m, s)
  }, 1000);
}

function pauseTimer() {
  value = timer.textContent;
  clearTimeout(id);
}

function resumeTimer() {
  var t = value.split(":");

  startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
}

start.addEventListener("click", function() {
  startTimer(5, 0);
}, false);

pause.addEventListener("click", pauseTimer, false);

resume.addEventListener("click", resumeTimer, false);
<body onload="startTimer(5, 0);">

  <p id="timer">00:00</p>
  <button id="start">Start</button>
  <button id="pause">Pause</button>
  <button id="resume">Resume</button>

</body>

Upvotes: 1

Views: 1017

Answers (5)

Sudharsan
Sudharsan

Reputation: 11

As browser renders HTML page from top to bottom, Your Javascript will get rendered after the body contents are loaded. So, Body - Onload event can't call your startTimer method as it is not available yet in the page.

You can move your startTimer(5,0) call to the bottom of the script.

Upvotes: 0

Cauterite
Cauterite

Reputation: 1694

None of the existing answers seem to address your actual problem, which is order of execution.

The reason your onload="startTimer(…)" event isn't working is that the script itself is set to execute 'onLoad', so onload="…" is firing before the script has run, meaning startTimer isn't defined yet.

By changing the JavaScript 'load type' to "No wrap - in < body >" (see https://i.sstatic.net/Jf4eH.jpg ), you can use the onLoad= attribute the way you expect:

http://jsfiddle.net/wwg8H/31/

Upvotes: 1

Abi
Abi

Reputation: 734

just remove startTimer(m, s)

var timer = document.getElementById("timer");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var resume = document.getElementById("resume");
var id;
var value = "00:00";


function startTimer(m, s) {
  timer.textContent = m + ":" + s;
  if (s == 0) {
    if (m == 0) {
      return;
    } else if (m != 0) {
      m = m - 1;
      s = 60;
    }
  }

  s = s - 1;
  id = setTimeout(function() {
    startTimer(m, s)
  }, 1000);
}

function pauseTimer() {
  value = timer.textContent;
  clearTimeout(id);
}

function resumeTimer() {
  var t = value.split(":");

  startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
}

start.addEventListener("click", function() {
  startTimer(5, 0);
}, false);

pause.addEventListener("click", pauseTimer, false);

resume.addEventListener("click", resumeTimer, false);
<body onload="startTimer(5, 0);">

  <p id="timer">00:00</p>
  <button id="start">Start</button>
  <button id="pause">Pause</button>
  <button id="resume">Resume</button>

</body>

Upvotes: 0

mvermand
mvermand

Reputation: 6137

Move the startTimer(m,s) to the bottom:

var timer = document.getElementById("timer");
var start = document.getElementById("start");
var pause = document.getElementById("pause");
var resume = document.getElementById("resume");
var id;
var value = "00:00";

function startTimer(m, s) {
    timer.textContent = m + ":" + s;
    if (s == 0) {
        if (m == 0) {
            return;
        } else if (m != 0) {
            m = m - 1;
            s = 60;
        }
    }

    s = s - 1;
    id = setTimeout(function () {
        startTimer(m, s)
    }, 1000);
}

function pauseTimer() {
    value = timer.textContent;
    clearTimeout(id);
}

function resumeTimer() {
    var t = value.split(":");

    startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
}

start.addEventListener("click", function () {
    startTimer(5, 0);
}, false);

pause.addEventListener("click", pauseTimer, false);

resume.addEventListener("click", resumeTimer, false);

startTimer(5,0);  // <----------

Upvotes: 0

Sankar
Sankar

Reputation: 7107

remove startTimer(m, s) from your code. There m and s are not defined.

<body onload="startTimer(5, 0);">

  <p id="timer">00:00</p>
  <button id="start">Start</button>
  <button id="pause">Pause</button>
  <button id="resume">Resume</button>

</body>

<script>
  var timer = document.getElementById("timer");
  var start = document.getElementById("start");
  var pause = document.getElementById("pause");
  var resume = document.getElementById("resume");
  var id;
  var value = "00:00";



  function startTimer(m, s) {
    timer.textContent = m + ":" + s;
    if (s == 0) {
      if (m == 0) {
        return;
      } else if (m != 0) {
        m = m - 1;
        s = 60;
      }
    }

    s = s - 1;
    id = setTimeout(function() {
      startTimer(m, s)
    }, 1000);
  }

  function pauseTimer() {
    value = timer.textContent;
    clearTimeout(id);
  }

  function resumeTimer() {
    var t = value.split(":");

    startTimer(parseInt(t[0], 10), parseInt(t[1], 10));
  }

  start.addEventListener("click", function() {
    startTimer(5, 0);
  }, false);

  pause.addEventListener("click", pauseTimer, false);

  resume.addEventListener("click", resumeTimer, false);
</script>

Upvotes: 1

Related Questions