How to pass a css value from one html page to another using javascript?-CodePudding

I am trying to pass a circle made with CSS from one HTML page to another. First the circle is green. After clicking a button the circle becomes red. I want the same green circle of the other html page to becomes red like in the first page. Here is the code of the first HTML page:

<!DOCTYPE html>
<html>
<head>

    <meta charset= "utf-8">
    <style>
        #first{
        height:20px;width:20px; 
        border-radius:50%;
        border-width: 5px;
        background-color: green;
        }
</style>
<script>
    function passvalues(){
    const first=document.getElementById("first");
    localStorage.setItem("firstvalues",first);
    return false;
}

</script>
</head>

<body>
    <div id="first"></div>
<input  type="button" value="click here" onclick="doSomeThing()">
<script>
    function doSomeThing(){
        document.getElementById("first").style.backgroundColor='red';
    }
</script>
<form action="second-page.html">
    <input type="submit" value="Click" onclick="passvalues()"/>
</form>

</body>

That's the code of the second HTML page (Second-page.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset= "utf-8">
    <style>
        #first{
            height:20px;width:20px; 
            border-radius:50%;
            border-width: 5px;
            background-color: green;
            } 
    </style>
</head>
<body>
<div id="first"></div>
<span id="first"></span>
<script>
    document.getElementById("first").innerHTML=localStorage.getItem("firstvalues");

</script>
</body>
</html>

When I run this code I get on the second page a green circle and [object HTMLDivElement] inside of it. I think something is wrong with the function innerHTML.

CodePudding user response：

You can avoid to use JavaScript including one single class in your index.css that use :active to change the color of the circle when clicked. That's a simple example that you can arrange to your needs:

<html>
  <body>
    <button >Click me</button>
    <style>
      .btn{
        background:black;
        color:white;
        border:0;
        margin:1rem;
      }

      .btn:active{
        background:red;
      }
    </style>
  </body>
</html>

One good idea is to activate the styling after a button is clicked with JavaScript so you don't have to pass the function to the other page, instead you can activate this class with onother button placed on second page.

In this example I've changed the background of the button, instead of changing button's style you can apply the class directly to the circle.

I hope this answer is usefull for you, if not, please tell me I would give you mnore help!

Your best.

CodePudding user response：

What you are trying to store here is the div as an object.

Instead try storing the Html itself of that div. Use:

localStorage.setItem("firstvalues", first.outerHTML)

Note: Ids should be unique to the page. When you put the content of the first page's #first in the second page's #first, you create two elements of the same id. Have different ids in both to avoid conflicts.

CodePudding user response：

You are submitting a form to another page. So why not use the standard method of passing data in a GET parameter?