CODEWITHSUNDEEP
javascripthtmlcss
qua1ity
qua1ity

Reputation: 623

Direct to another page while changing a class on that page

I have two html pages and i need to link the first page to the second and then modify a class of an element on that second page.

For example.. page one have 2 buttons if you press the first, you get directed to the second page and the second pages background becomes green. If you press the second button you get directed the same way, but the background becomes blue.

Is there a way of doing this? Not using jquery.

Upvotes: 0

Views: 75

Answers (1)

ray
ray

Reputation: 27275

You could pass a parameter via the query string and use document.location.search on page 2 to get the parameter and set the color accordingly.

<a href="page2.html?color=green">Green</a>
<a href="page2.html?color=blue">Blue</a>

Then on page2:

<script>
    // Assuming the query string is ?color=blue,
    // splitting on = will result in ["?color", "blue"].
    // In the real world you shouldn't assume it's in
    // exactly that format, but for the sake of example...

    var color = window.location.search.split('=')[1];

    // add the css class 'blue' to the body tag.
    var document.body.classList.add(color);
</script>

And in css:

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

Upvotes: 2

Related Questions