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>

Keep the browser's JavaScript console open. You can see the error messages there. — JJJ
– JJJ, Commented Oct 4, 2015 at 16:17
Does this answer your question? Executing JavaScript in the <head>, getElementById returns null — dumbass
– dumbass, Commented Jun 27, 2024 at 9:18

Praveen Kumar Purushothaman · Accepted Answer · 2015-10-04 16:50:43Z

3

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>

edited Oct 4, 2015 at 16:50

answered Oct 4, 2015 at 16:16

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

JJJ Over a year ago

That is not the only problem.

Praveen Kumar Purushothaman Over a year ago

@Juhana Yes, thanks. I updated the answer. Have a look. :)

Toffer Over a year ago

Thanks for the help The only thing left ist that in the browser, when inspecting the <body> element, there are no event listeners ...

JJJ Over a year ago

Have you actually tried this code? Because there's no way that it does anything.

Praveen Kumar Purushothaman Over a year ago

@Toffer What exactly would you want? Okay, I just saw it.

Toffer · Accepted Answer · 2015-10-04 18:59:27Z

0

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>

answered Oct 4, 2015 at 18:59

Toffer

811 silver badge10 bronze badges

Collectives™ on Stack Overflow

A simple JavaScript not working

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related