0

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.

MicroDev92
  • 169
  • 1
  • 15
  • DO you call `changeColor` ??? – epascarello Feb 16 '17 at 01:25
  • yes, I call it in the onclick event in the button! – MicroDev92 Feb 16 '17 at 01:26
  • I have edited the question abit. – MicroDev92 Feb 16 '17 at 01:28
  • 1
    submit buttons submit..... – epascarello Feb 16 '17 at 01:29
  • when i change the onclick with onsubmit all of these functions don't work. – MicroDev92 Feb 16 '17 at 01:30
  • 1
    form submits, page refreshes.... You need to cancel the form submission.... – epascarello Feb 16 '17 at 01:30
  • 1
    try using the html element `button` with `type="button"` instead of an `input` with `type="submit"` – haxxxton Feb 16 '17 at 01:32
  • this being beside the question point, but I'll bite...how would I do that? – MicroDev92 Feb 16 '17 at 01:33
  • @haxxxton Okay, this works, but it still isn't changing the color of the div on page 1. – MicroDev92 Feb 16 '17 at 01:35
  • How would it change it on the other page? You do nothing to update the first page – epascarello Feb 16 '17 at 01:37
  • Possible duplicate of [Global Variable usage on page reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-page-reload/) – guest271314 Feb 16 '17 at 01:38
  • Okay, a little breakthrough - I have now placed localStorage creating to page 2, and called `getItem` on page 1, and it changes the div, but only after it has been refreshed. how can i refresh the page 1 automatically after page 2 has been closed? – MicroDev92 Feb 16 '17 at 01:40
  • 1
    @MicroDev, i assume the "other page" isnt "watching" for a change to the localStorage value. You'll need to look into [subscribing to changes on localStorage](http://stackoverflow.com/a/32965332/648350) – haxxxton Feb 16 '17 at 01:41
  • @haxxxton I'm still learning html, and I didn't get to study eventListeners so I don't know how should I apply them :s – MicroDev92 Feb 16 '17 at 01:46
  • @MicroDev, you'll need to do some research then :) inline binding of js (ie. using `onclick`) is sooo last year ;) `addEventListener` is your friend.. embrace it.. love it.. welcome it into your heart.. be forever changed by the separation of display and logic <3 – haxxxton Feb 16 '17 at 01:49
  • @haxxxton hahaha I am already on it, and I have learned that the 2 parameters needed are the type of the event and the function, but in the link you have shared above, the guy puts `storage` as an event, does the `storage` event exist? or did he just made it up? it's a bit confusing – MicroDev92 Feb 16 '17 at 01:57
  • 1
    @MicroDev, the event exists, as per the answer, the event is emitted by the browser when any change happens to either the localStorage or sessionStorage. The code the answerer provided would be where you would retrieve the newly set localStorage value, and change the color of your element. This way you dont need to refresh the page, as your code has "heard" the changed the other tab has made to the localStorage – haxxxton Feb 16 '17 at 02:02
  • @haxxxton yes it works! eventListeners are cool xD You can write the answer so I can up vote and accept it for your rep :) – MicroDev92 Feb 16 '17 at 02:06

1 Answers1

1

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 :)

Community
  • 1
  • 1
haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • Thanks a ton! :D just 1 more tiny little thing, this all works but it isn't permanently changing the color of the div! it is when I place `var myLoadedColor = localStorage.getItem('myDataStorage'); document.getElementById('L1').style.backgroundColor = myLoadedColor;` to the `window.onload`. Is that the correct thing to do? – MicroDev92 Feb 16 '17 at 02:29