when clicked on a tag change the background color of the redirected page?-CodePudding

what i want to do is that when we click on anchor tag then it will go to page2.html and change the background color of a specific div.
(Anchor tag has an url&id in its href to redirect at new page but at a specific section.)
page1.html

<html>
<body>
    <a href="/page2.html#color1">yellow</a>
    <a href="/page2.html#color2">green</a>
    <a href="/page2.html#color3">blue</a>
</body>
</html>

page2.html

<html>
<body>
    <div id="color1">
        <p>yellow</p>
    </div>

    <div id="color2">
        <p>green</p>
    </div>

    <div id="color3">
        <p>blue</p>
    </div>
</body>
</html>

i tried to use fuction like
(page1.html)

    <a href="/page2.html#color1" onclick="changecolor()">yellow</a>

    <script>
        function changecolor() {
            document.getElementById(color1).style.background = "yellow";
        }
    </script>

i tried more fuction like this but none of them works!
is it possible to do it by only using javascript??
can anyone help me??

CodePudding user response：

IMHO the best solution should be not to use an onclick event as it does not trigger the script to change styles on another site that isn't even loaded yet.

As such I would recommend to run the script on the 2nd Page and use window.location.href to get the url.

Then you can use Switch-Statements to apply changes something like this:

var url = window.location.href,
    div = document.getElementById('id');

switch (url) {
  case /page2.html#color1:
    div.style.background = "yellow";
    break;
  case /page2.html#color2:
    div.style.background = "green";
    break;
  case /page2.html#color3:
    div.style.background = "blue";
    break;
}

CodePudding user response：

I think its better to listen to the hashchange event, and then just manipulate the needed elements css

<body id="someId">
    <a href="./page2.html#yellow">yellow</a>
    <a href="./page2.html#green">green</a>
    <a href="./page2.html#blue">blue</a>
</body>

<script>
window.addEventListener('hashchange', (event) => {
    const color = window.location.hash.replace('#', '')
    document.getElementById('someId').style.background = color
});
</script>

CodePudding user response：

You need to put the id in double quotes, like document.getElementById("color1").style.background = "yellow"