Move color of an HTML element to another page

user_16307404 0
Viewed 39

Good evening, i was working on a part of what i hope will be my future website and i wanted to add a "photograpy" section to it, and here comes the problem. since the title in the main page constatly changes color, i'd like to grab its current color to transfer it to the title of the other page to play an animation later on. the problem is that when i press the related button, i am taken to the photograpy page, but the title remains black. i've tried seraching for help on google but i haven't been able to find much. here is the JS

if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function() {
        loaded();
    });
} else if (document.attachEvent) {
    document.attachEvent("onreadystatechange", function() {
        loaded();
    });
}

function loaded() {
    document.getElementById("PHtitle").style.color === titlecolor;
}

function script() {
    const titlecolor = document.getElementById("title").style.color;
};

document.getElementById('photograpy').onclick = function () {
    script();
};
javascript
1 Answers

The snippets don't allow for localStorage, so here is just the javascript.

First, I let the variables outside of a function. The titleColor function checks to see if titleColor was saved in localStorage, if not the default color is black.

Then I set the color of the phtitle to the contents of titleColor variable.

In the script function, I set the localStorage variable to the getComputedStyle color of the title.

Then last I use an event listener on the button to run the script for saving the color.

LocalStorage is a way to store data in the user's browser until they close their browser/clear their data etc.. Which will allow it to be usable on different pages then where it was saved.

    let titleColor = localStorage.getItem("titleColor") || "#000000";
    let PHtitle = document.querySelector("#PHtitle");
    let title = document.querySelector("#title");
    let btn = document.querySelector("#photography");
    
if(PHtitle){
    PHtitle.style.color = titleColor;
}
    
    function script() {
      localStorage.setItem("titleColor", getComputedStyle(title).color)
    }
    
if(btn && title){
    btn.addEventListener("click", function() {
      script();
    })
}
user_36842650
Related