Refresh a Page in JavaScript

October 10, 2022

Refresh a Page in JavaScript

Refreshing a webpage gives users the most updated User Interface.

window.location.reload();

The reload() method is the method responsible for page reloading.

location is an interface that represents the actual location (URL) of the object to which it is linked.

In this case, the URL of the page to be reloaded.

How to Refresh/Reload a Page in JavaScript after Clicking a Button?

JavaScript Code:

refresh a page in Javascript.html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Refresh a Page in JavaScript
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="refresh.css">
    </head>
    <body>
        <h1 style="text-align:center">Date</h1>
        <script>
            date=`Today Date and Time : `+ Date() +'<br/>';
            document.write(date)
        </script>
        <button class="btn" onclick="location.reload()">REFRESH</button>
    </body>
</html>

refresh.css

*{
    margin: 0px;
    padding:0px;
}
body{
    background-image: url('refresh.jpg');
    background-repeat: no-repeat;
    width:100%;
    background-size: cover;
}
.btn{
    background-color:rgb(141, 230, 230);
    color: aliceblue;
    padding: 5px;
    margin-left: 43%;
    margin-top: 18px;
}

Output:

Before Clicked the Refresh Button:

After Clicked the Refresh Button:

After the clicking the refresh button the current time is displayed, therefore the refresh button reloads the page and displays the current date and time to the user.