{"id":24773,"date":"2020-10-26T10:08:00","date_gmt":"2020-10-26T17:08:00","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=24773"},"modified":"2020-12-29T13:41:39","modified_gmt":"2020-12-29T21:41:39","slug":"javascript-refresh-page","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/","title":{"rendered":"JavaScript: Refresh Page"},"content":{"rendered":"\n<p>Sometimes you need to refresh a webpage using JavaScript. If the need arises, use the location object to use the <code>reload()<\/code> method.<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n \n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot;&gt;\n  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\n  &lt;title&gt;repl.it&lt;\/title&gt;\n  &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; \/&gt;\n&lt;\/head&gt;\n \n&lt;body onload=&quot;handleLoad()&quot;&gt;\n  &lt;button id=&quot;btn&quot;&gt;Click Me!&lt;\/button&gt;\n   &lt;script&gt;\n     let arrayKittens = [ &quot;http:\/\/placekitten.com\/200\/300&quot;, &quot;http:\/\/placekitten.com\/210\/310&quot;, &quot;http:\/\/placekitten.com\/300\/300&quot;, &quot;http:\/\/placekitten.com\/300\/200&quot;, &quot;http:\/\/placekitten.com\/310\/210&quot;, &quot;http:\/\/placekitten.com\/400\/300&quot;];\n \n     let button = document.querySelector(&quot;#btn&quot;);\n     button.style.display = &quot;block&quot;;\n     button.style.margin = '20px 0px'\n \n     const handleClick = (e) =&gt; {\n       console.log(&quot;click&quot;)\n       location.reload(true);\n     }\n \n     button.addEventListener(&quot;click&quot;, handleClick);\n \n \n     let body = document.querySelector(&quot;body&quot;);\n     let image = document.createElement(&quot;img&quot;);\n \n     const handleLoad = (e) =&gt; {\n       console.log(&quot;loaded&quot;)\n       let random = Math.floor(Math.random() * arrayKittens.length);\n       let newImg = arrayKittens[random];\n       image.setAttribute(&quot;src&quot;, newImg);\n       image.setAttribute(&quot;width&quot;, &quot;300&quot;);\n       image.setAttribute(&quot;height&quot;, &quot;300&quot;);\n       image.setAttribute(&quot;alt&quot;, &quot;  arrayKittens[&quot; + random + &quot;]&quot;);\n       image.style.objectFit = &quot;cover&quot;;\n \n \n       body.appendChild(image);\n     };\n   &lt;\/script&gt;\n &lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>There are two event listeners in this document. The first happens when the page loads to add an <code>&lt;img \/&gt;<\/code> to the DOM. The second contains our <code>reload()<\/code> function. When a user clicks on \u201cClick Me!\u201d, the page will reload by triggering the <code>handleClick()<\/code> function. This page uses JavaScript to handle just about all of our logic.<br><\/p>\n\n\n\n<p>In this particular example, a random cat picture from an array of cat pictures will display each time the page reloads.<br><\/p>\n\n\n\n<p>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.<br><\/p>\n\n\n\n<p>That\u2019s all there is to it!<\/p>\n","protected":false},"excerpt":{"rendered":"Sometimes you need to refresh a webpage using JavaScript. If the need arises, use the location object to use the reload() method. &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt; &lt;title&gt;repl.it&lt;\/title&gt; &lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; \/&gt; &lt;\/head&gt; &lt;body onload=&quot;handleLoad()&quot;&gt; &lt;button id=&quot;btn&quot;&gt;Click Me!&lt;\/button&gt; &lt;script&gt; let arrayKittens = [ &quot;http:\/\/placekitten.com\/200\/300&quot;, &quot;http:\/\/placekitten.com\/210\/310&quot;, &quot;http:\/\/placekitten.com\/300\/300&quot;, &quot;http:\/\/placekitten.com\/300\/200&quot;, &quot;http:\/\/placekitten.com\/310\/210&quot;, &quot;http:\/\/placekitten.com\/400\/300&quot;]; let&hellip;","protected":false},"author":77,"featured_media":24774,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-24773","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>JavaScript: Refresh Page: A Step-By-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn how to refresh a page using JavaScript in this article by Career Karma!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript: Refresh Page\" \/>\n<meta property=\"og:description\" content=\"Learn how to refresh a page using JavaScript in this article by Career Karma!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-26T17:08:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T21:41:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"JavaScript: Refresh Page\",\"datePublished\":\"2020-10-26T17:08:00+00:00\",\"dateModified\":\"2020-12-29T21:41:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/\"},\"wordCount\":161,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/\",\"name\":\"JavaScript: Refresh Page: A Step-By-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg\",\"datePublished\":\"2020-10-26T17:08:00+00:00\",\"dateModified\":\"2020-12-29T21:41:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Learn how to refresh a page using JavaScript in this article by Career Karma!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg\",\"width\":1020,\"height\":680,\"caption\":\"Lemons and limes with refreshing glasses of lemonade\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript-refresh-page\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript: Refresh Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript: Refresh Page: A Step-By-Step Guide | Career Karma","description":"Learn how to refresh a page using JavaScript in this article by Career Karma!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript: Refresh Page","og_description":"Learn how to refresh a page using JavaScript in this article by Career Karma!","og_url":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-10-26T17:08:00+00:00","article_modified_time":"2020-12-29T21:41:39+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"JavaScript: Refresh Page","datePublished":"2020-10-26T17:08:00+00:00","dateModified":"2020-12-29T21:41:39+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/"},"wordCount":161,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/","url":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/","name":"JavaScript: Refresh Page: A Step-By-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg","datePublished":"2020-10-26T17:08:00+00:00","dateModified":"2020-12-29T21:41:39+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Learn how to refresh a page using JavaScript in this article by Career Karma!","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/10\/mariah-hewines-mX-v_ylfGuI-unsplash.jpg","width":1020,"height":680,"caption":"Lemons and limes with refreshing glasses of lemonade"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/javascript-refresh-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript: Refresh Page"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/24773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=24773"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/24773\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/24774"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=24773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=24773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=24773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}