Clash Royale CLAN TAG#URR8PPP

How to detect if webpage is being reloaded after the initial load with Javascript?

So I have a sort of newbie of a question : How can I detect if a page have been reloaded after the initial load ?

I am asking that question because I have a problem : My JavaScript code works as it should when the user gets to the page. But when the user is on that page and reload the page ,the code breaks and stop working.

I'm trying to find a way for the code to reloads if the page reloads or to edit my code to fix the problem.

Here is the code. It a dynamic drop-down list with one parent and one child:

"use strict";

/*
The dynamic drop-down does not work properly with safari on mac OS. It does disable child options but they remain visible.
*/

window.onload = function ()

//parent function start here ...
function parent_()
let p = document.getElementById('category_select'),
c = p.options[p.selectedIndex].value;
return c; // return parent options value

//child function start here ...
function child_()
// create a list of all child options in the dropdown ...
let c = document.getElementById('type_select');
for (let l = 0; l < c.options.length; ++l)

// if parent options value === child option values it display all child options values that match the selected parent value
if (c.options[l].value === parent_())
c.options[l].style.display = 'block';
c.options[l].disabled = false;

// and disable all child options that dont match the selected parent value
else
if (c.options[l].value !== parent_())
c.options[l].style.display = 'none';
c.options[l].disabled = true;



let l = document.location.pathname;
if (l === "/get-started")
// on page load, disable child drop-down
let p = document.getElementById('category_select'),
c = document.getElementById('type_select'),
p_ = p.options[p.selectedIndex].value;
if (p_ === "")
c.disabled = true;

p.addEventListener("change", function ()
let p = document.getElementById('category_select'),
c = document.getElementById('type_select'),
p_ = p.options[p.selectedIndex].value;
if (p_ !== "") //parent drop-down has a selected value ...
//get first child with options value equal to parent's one
c.value = p_;
//disable the child drop-down
c.disabled = false;
child_();
else if (p_=== "")
c.value = p_;
c.disabled = true;

)
else
if (l !== "/get-started")
return null;

;


window.onload()

1 Answer
1

You need a variable to save your page's state when your page is
destoryed.

So in this idea, you can try cookies or localStorage, even add the states to url as params. When initials the page, reads localStorage(For example), if state exists, read those variables rende your drop-down. If not, get state from last page and initial.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.