CODEWITHSUNDEEP
javascripthtml
MicroDev92
MicroDev92

Reputation: 169

Change color of div from localStorage on another page isn't working

Okay so I have two pages, 1 page contains a table with clickable div's, plenty of them, and when 1 is pressed it leads to page 2 which contains a form in which user enters information that is stored in local storage, now what I'm trying to achieve is to change the color of that DIV on page 1 that if the form was successfully submitted, and I mean change it permanently.
This is the code I have used on page 1:

 window.onload = function () {
        myCustomColor = 'red';
        localStorage.setItem('myDataStorage', myCustomColor);
    var d = document.getElementsByClassName("circleBase type1");
    for(var i = 0; i < d.length; i++) {
        d[i].onclick = function() {
            window.open("EnterInformation.html");               
        }

    }
}

with this code i store the color to the local storage. Now for testing purposes I added an ID to just one div id='L1', so I tried getting the item by .getItem like this:

 function changeColor() {
        var myLoadedColor = localStorage.getItem('myDataStorage');
        document.getElementById('L1').style.backgroundColor = myLoadedColor;

 <input type="submit" name="appointment" value="" class="btn-warning" onclick="SaveInfo(); closeSelf(); changeColor()" />

Nothing happens?! Now I wanted to see if it is even getting the stored color by trying to change the color of div on page 2(EnterInformation.html) and it works but it changes the color of the div for a second and then returns it to default, why is that happening? Any advice?
My original question which I wanted to post was Is it possible to change the color of the clicked div from another page, but this is far more complicated than I imagined!

P.S. both pages are open at the same time on different tabs.

Upvotes: 0

Views: 134

Answers (1)

haxxxton
haxxxton

Reputation: 6442

You're probably encountering the issue because when you click on an input with type="submit" it attempts to "submit" the form that it's attached to. Generally, this involves a page refresh (which is not what you want). You can either listen for the form submit and cancel its propagation programmatically, or (given we dont actually want to submit anything) change out the html to use a button with type="button". Personally, I believe it's best to use the right tools for the job, so let's go with option 2.

<button type="button class="btn-warning" onclick="SaveInfo(); closeSelf(); changeColor()">Click me to changeColor</button>

Your next issue is going to be that, even though your javascript code attached to your button works, the other page isnt "listening" for the change to the shared localStorage. For this, we can leverage the code from this answer, that describes the process of binding to the storage event, and performing an action as a result. In your case it would look like:

window.addEventListener('storage', function(event){
    if (event.storageArea === localStorage) {
        var myLoadedColor = localStorage.getItem('myDataStorage');
        document.getElementById('L1').style.backgroundColor = myLoadedColor;
    }
}, false);

I would suggest given this introduction to addEventListener to your code, that you look at "upgrading" your new button element to use a similar approach. I suggest this for the sake of separating your display code from your logic code. It will make maintenance that much easier in the future. I'll let you come up with your own analogy as to why keeping similar things together makes them easier to find and update :)

Upvotes: 1

Related Questions