Javascript handle refreshing with button

Question

I am quite new to Javascript. I am trying to implement a button that controls whether a page is refreshing or not. However, it doesnt work (clicking on the button triggers some actions like alert etc, but doesnt change the label button and doesnt stop refreshing the page).

Can you tell me where I went wrong, please? Here is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Message log</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body onload="JavaScript:timedRefresh(5000);">

    <button id="bRefresh" onclick="refreshMode()">Stop refreshing</button>

    some content...

</body>
</html>

<script type="text/JavaScript">
    <!--
        var refresh = 1;

        function timedRefresh(timeoutPeriod) {
            if(refresh == 1) {
                setTimeout("location.reload(true);",timeoutPeriod);
            }       
        }

        function refreshMode() {
            if(refresh == 1) {
                var refresh = 2;
                document.getElementById("bRefresh").value="Start refreshing";
            } else {
                var refresh = 1;
                document.getElementById("bRefresh").value="Stop refreshing";
            }       
        };
    //   -->
</script>

this wont work at all..Because once page starts reloading javascript will stop excecuting — Vicky Gonsalves
– Vicky Gonsalves, Commented Apr 22, 2013 at 9:14

Vinay · Accepted Answer · 2013-04-22 09:26:18Z

Your code should look like below,

        var refresh = 1;
        var timedInterval= null;
        function timedRefresh(timeoutPeriod) {
            if(refresh == 1) {
                timedInterval = setInterval(function() { location.reload(true); },timeoutPeriod);
            }       
        }

        function refreshMode() {
            if(refresh === 1) {
                 refresh = 2;
                 clearInterval(timedInterval);
                 document.getElementById("bRefresh").innerHTML="Start refreshing";
            } else {
                 refresh = 1;
                 timedRefresh(5000);
                document.getElementById("bRefresh").innerHTML="Stop refreshing";
            }     
            //document.getElementById("bRefresh").innerHTML="Start refreshing";  
        };

Use setInterval instead of setTimeout for repeated tasks

you declared refresh variable three times so your buttons value doesn't change.

innerHTML instead of value should be used to change the Buttons text.

To stop use clearInterval as above.

Arun P Johny · Accepted Answer · 2013-04-22 09:20:48Z

0

use innerHTML for supporting IE < 9

var button = document.getElementById("bRefresh");
var refresh = 1;

function refreshMode() {
    if (refresh == 1) {
        refresh = 2;
        button.innerHTML = "Start refreshing";
    } else {
        vrefresh = 1;
        button.innerHTML = "Stop refreshing";
    }
};

button.addEventListener("click", refreshMode, false);

answered Apr 22, 2013 at 9:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

Xotic750 · Accepted Answer · 2013-04-22 09:21:40Z

0

<button id="bRefresh">Stop refreshing</button>

var button = document.getElementById("bRefresh");
var refresh = 1;
var timeoutPeriod = 5000;
var id;

function timedRefresh() {
    if (refresh == 1) {
        window.location.reload(true);
    }
}

function refreshMode() {
    if (refresh == 1) {
        clearInterval(id);
        refresh = 2;
        button.textContent = "Start refreshing";
    } else {
        id = setInterval(timedRefresh, timeoutPeriod);
        refresh = 1;
        button.textContent = "Stop refreshing";
    }
};

button.addEventListener("click", refreshMode, false);

id = setInterval(timedRefresh, timeoutPeriod);

on jsfiddle

edited Apr 22, 2013 at 9:21

answered Apr 22, 2013 at 9:16

Xotic750

23.6k8 gold badges59 silver badges81 bronze badges

Comments

Marcassin · Accepted Answer · 2013-04-22 09:28:56Z

On the load of the body, prepareRefresh() function check the value refresh (set to 1) and start refresh the page with a timeout. You should launch the refresh, and just before refresh, you had to check the refresh value. Because in the first case, location.reload don't care about modification of refresh. Check the refresh value at the end of the timeout

<script type="text/JavaScript">
    <!--
        var refresh = 1;

        function timedRefresh(timeoutPeriod) {
            if(refresh == 1) {
                setTimeout("refreshPage();",timeoutPeriod);
            }       
        }

        function refreshPage ()
        {
          if(refresh == 1) {
                setTimeout("location.reload(true);", 0);
            }  
        }

        function refreshMode() {
            if(refresh == 1) {
                refresh = 2;
                document.getElementById("bRefresh").innerHTML="Start refreshing";
            } else {
                refresh = 1;
                document.getElementById("bRefresh").innerHTML="Stop refreshing";
            }       
        };
    //   -->
</script>

Collectives™ on Stack Overflow

Javascript handle refreshing with button

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related