Question 328380 in Html Question posted in
Some basic documentation can be found here.

How can I persist color changes to html elements?

In my attached code, I display a color picker, then I select a color, then I click the button "contact-info-btn" to change its background color to the selecetd color. However, the change is only good for that window. When refresh the window, it goes back to the old color. is there any way to make this change permanent?

<script>
document.querySelector('#contact-info-btn').addEventListener('click', (event) => {
            event.target.style.backgroundColor = document.querySelector("#color-picker").value
        });
<label for="color-picker">Color:</label>
    <input type="color" id="color-picker" />
    <form method="post" class="homepg-form" id="homepg-form" >
.
.
<button class="contact-info-btn" id="contact-info-btn" type="button" >İletişim bilgileri</button>
Tags:

2

Answers


  1. 0

    You can use localStorage to save the value and set it when the page reloads:

    document.querySelector('#contact-info-btn').addEventListener('click', (event) => {
    let color = document.querySelector("#color-picker").value;
    event.target.style.backgroundColor = color;
    localStorage.setItem('contact-info-btn-color', color);
});

window.addEventListener('load', () => {
    let color = localStorage.getItem('contact-info-btn-color');
    if(color !== null)
        document.querySelector('#contact-info-btn').style.backgroundColor = color;
});
    Login or Signup to reply.
  2. 0

    localStorage: localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date.

            function setColorToLocalStorage(value) {
            return localStorage.setItem('bgColor', value);
        }

        function getColorFromLocalStorage() {
            return localStorage.getItem('bgColor');
        }

        function changeBgColor(elem) {
            //get value from local storage if not set in local storage then use default value
            elem.style.backgroundColor = getColorFromLocalStorage() || 'blue';
        }

        const contactBtn = document.querySelector('#contact-info-btn');

        //set/update localstorage bgColor value
        contactBtn.addEventListener('click', () => {
            const bgColorVal = document.querySelector("#color-picker").value;
            // set bgColor to localStorage
            setColorToLocalStorage(bgColorVal);
            //change background color
            changeBgColor(contactBtn);
        });

        window.addEventListener("load", () => {
            //on window refresh get bgColor value from localstorage
            changeBgColor(contactBtn);
        });

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <label for="color-picker">Color:</label>
    <input type="color" id="color-picker" />
    <form method="post" class="homepg-form" id="homepg-form">
        <button class="contact-info-btn" id="contact-info-btn" type="button">Change Background</button>
    </form>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search