CODEWITHSUNDEEP
javascript
Toffer
Toffer

Reputation: 73

A simple JavaScript not working

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>

Upvotes: -1

Views: 75

Answers (2)

Toffer
Toffer

Reputation: 73

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>

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167220

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>

Upvotes: 3

Related Questions