I have a code which every time i click the button it changes the background color of different elements by toggling classes and all these are stored in localStorage. But there is a class of one of my elements that it is stored in localStorage but when i refresh the page the new background color is gone, but the value “the new class” is stored. So while all the rest of the elements have the new backgrounds this has the old. I don’t know why this is happening because it is the same code for all the elements. This shouldn’t happen. The element that i am targeting to add class is the “.ps-stream” and the var that i store the localStorage is the “getFavStreamPost” Here is the code:
I am sorry but , by the value “the new class” i was refering to the new class of the element which is the “acitivityPost”. In the localStorage of the browser there is the key: streamPost and the value: activityPost along with the rest of the key value pairs, after i had clicked the button to change the background colors. But when i refresh the page the color of the specific element returns to the original color but the key value pair is still in the memory. That’s why i don’t understand why it doesn’t keep the new background color. The above colde works for all the html elements except for one.
the problem is in the red boxes in the activity stream. After i changed the colors by clicking the “dark mode” link in the menu bar everything changed to black and when i refreshed the page all remained black except the activity posts, but the value of the new class is still in the memory as you can see.
right. So the bit you’re trying to change is dynamically loaded, which is why jquery isnt finding it when you execute the script. Those boxes dont exist at the moment your script runs.
I just had to run the script after all the other scripts as m_hutley suggested above and for the activity posts that are loaded when the user scrolls down, i had to use the mutationObserver to track when a specific class appears in the DOM add also the class from the localStorage.
Hello m_hutley, above i posted the working code. But i checked it again it seems that it has stopped adding values to the local storage. Any ideas why this has happened? The code was working fine.
well i’m not sure why you’re stacking a setTimeout inside a window.load, inside a document.ready, but… sure…
I’d be absolutely guessing without being able to recreate it myself, but at a guess, your button has changed classes.