Sometimes you need to refresh a webpage using JavaScript. If the need arises, use the location object to use the reload() method.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="handleLoad()">
<button id="btn">Click Me!</button>
<script>
let arrayKittens = [ "http://placekitten.com/200/300", "http://placekitten.com/210/310", "http://placekitten.com/300/300", "http://placekitten.com/300/200", "http://placekitten.com/310/210", "http://placekitten.com/400/300"];
let button = document.querySelector("#btn");
button.style.display = "block";
button.style.margin = '20px 0px'
const handleClick = (e) => {
console.log("click")
location.reload(true);
}
button.addEventListener("click", handleClick);
let body = document.querySelector("body");
let image = document.createElement("img");
const handleLoad = (e) => {
console.log("loaded")
let random = Math.floor(Math.random() * arrayKittens.length);
let newImg = arrayKittens[random];
image.setAttribute("src", newImg);
image.setAttribute("width", "300");
image.setAttribute("height", "300");
image.setAttribute("alt", " arrayKittens[" + random + "]");
image.style.objectFit = "cover";
body.appendChild(image);
};
</script>
</body>
</html>There are two event listeners in this document. The first happens when the page loads to add an <img /> to the DOM. The second contains our reload() function. When a user clicks on “Click Me!”, the page will reload by triggering the handleClick() function. This page uses JavaScript to handle just about all of our logic.
In this particular example, a random cat picture from an array of cat pictures will display each time the page reloads.
The true or false value passed in will indicate whether or not the page is reloaded from the server or from the browser cache. The default value is false, which reloads the page from the cache, so there is no need to pass a value in unless you want to reload the page from the server.
That’s all there is to it!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
