A simple JavaScript not working

Question

I want to measure the time in which the user keeps the site on focus, but it doesn't work.

<!doctype html>
<head>

<script>
    var timeActive;
    function timeActiveFuncStart(){
        timeActive = 0;
        function timeActiveFunc(){
            timeActive++;
            setTimeout("timeActiveFunc()", 1000)}}

    var timeActiveTotal;
    function timeActiveTotalFunc(){
        timeActiveTotal = timeActiveTotal + timeActive}

    document.getElementById("timeActiveP").innerHTML = timeActive;
    document.getElementById("timeActiveTotalP").innerHTML = timeActiveTotal;
</script>

</head>

<body onfocus="timeActiveFuncStart()" onblur="timeActiveTotalFunc()">

<p id="timeActiveP"></p>
<p id="timeActiveTotalP"></p>

</body>
</html>

Check this out http://stackoverflow.com/questions/6939047/does-html-body-tag-have-an-onblur-event — JJF, Oct 04 '15 at 16:16
Keep the browser's [JavaScript console](http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers) open. You can see the error messages there. — JJJ, Oct 04 '15 at 16:17

Praveen Kumar Purushothaman · Answer 1 · 2015-10-04T16:50:43.360

It is because, JavaScript cannot access the elements. And also, consider using setInterval instead of setTimeout this way:

Please replace the <script> to go to the bottom:

<!doctype html>
<head>

</head>

<body onfocus="timeActiveFuncStart()" onblur="timeActiveTotalFunc()">

  <p id="timeActiveP"></p>
  <p id="timeActiveTotalP"></p>

  <script>
    var timeActive;
    var timeActiveTotal = 0;
    function timeActiveTotalFunc() {
      timeActiveTotal = timeActiveTotal + timeActive;
    }
    function timeActiveFuncStart() {
      timeActive = 0;
      function timeActiveFunc() {
        timeActive++;
        document.getElementById("timeActiveP").innerHTML = timeActive;
        document.getElementById("timeActiveTotalP").innerHTML = timeActiveTotal;

      }
      setInterval(timeActiveFunc, 1000);
    }

  </script>

</body>
</html>

Or, can you put it after window.onload event?

<!doctype html>
<head>

<script>
  window.onload = function () {
    var timeActive;
    function timeActiveFuncStart(){
        timeActive = 0;
        function timeActiveFunc(){
            timeActive++;
        }
        setInterval("timeActiveFunc()", 1000);

    var timeActiveTotal;
    function timeActiveTotalFunc(){
        timeActiveTotal = timeActiveTotal + timeActive}

    document.getElementById("timeActiveP").innerHTML = timeActive;
    document.getElementById("timeActiveTotalP").innerHTML = timeActiveTotal;
  }
</script>

</head>

<body onfocus="timeActiveFuncStart()" onblur="timeActiveTotalFunc()">

<p id="timeActiveP"></p>
<p id="timeActiveTotalP"></p>

</body>
</html>

@Juhana Yes, thanks. I updated the answer. Have a look. `:)` — Praveen Kumar Purushothaman, Oct 04 '15 at 16:26
Thanks for the help The only thing left ist that in the browser, when inspecting the element, there are no event listeners ... — Toffer, Oct 04 '15 at 16:38
Have you actually tried this code? Because there's no way that it does anything. — JJJ, Oct 04 '15 at 16:39

score 0 · Answer 2 · answered Oct 04 '15 at 18:59

Thanks again for the help, but ... here's something that finally works:

<script>
var timeActive = 0;
var timeActiveTotal = 0;

window.onpageshow = function(){
    setInterval(function(){
        timeActive++;
        document.getElementById("timeActiveP").innerHTML = timeActive;
    }, 1000);

    window.onblur = function(){
        timeActiveTotal = timeActiveTotal + timeActive;
        document.getElementById("timeActiveTotalP").innerHTML = timeActiveTotal;
    }

    window.onfocus = function(){
        timeActive = 0;
    }
}
</script>

A simple JavaScript not working

2 Answers2