CODEWITHSUNDEEP
javascripthtmlcss
Giuseppe
Giuseppe

Reputation: 17

Edit HTML style after a Javascript redirect

I have 2 HTML pages, 1 CSS file, and 1 javascript file. On each HTML page, I have 2 buttons for the switch by the pages. When I press button 1 I go to page 1, when I press button 2 I go to page 2. I'm trying to change the button color when I switch from the page. Example:

I am the page 1 and I have button 1 with red color and button 2 with white color. When I press button 2 I want:

Url change to HTML page 2 (I know how to do it) Button 1 change to white color (I don't know how to do it) Button 2 changed to red color (I don't know how to do it)

this is the code:

script.JS

function clickedbutton2(){
  window.location.href = "page2.html";
  document.getElementById("button1").style.color = 'white';
  document.getElementById("button2").style.color = 'red';
}

function clickedbutton2(){
      window.location.href = "page1.html";
      document.getElementById("button1").style.color = 'red';
      document.getElementById("button2").style.color = 'white';
}

page1.html and page2.html (are equals):

<a href = "javascript: clickedbutton1()" class = "button1">button1</a>
<a href = "javascript: clickedbutton2()" class = "button2">button2</a>

style.css:

.button1 {
color: "red";
}

.button2 {
color: "white;
}

When I click the button, the URL and page change but the colors no.

Upvotes: 0

Views: 341

Answers (1)

Ramon de Vries
Ramon de Vries

Reputation: 1342

You can change the button color based on what page you are on, one way to do it is to add a class (in this case page1 & page2) to the body and use those classes when styling the buttons in the CSS like so:

notice the html stays the same apart from a different class on the body, and the buttons have a different color.

.page1 .button1,
.page2 .button2{
color: red;
}

.page1 .button2,
.page2 .button1{
color: white;
}
<html>
<body class="page1">
<a href="#" class="button1">button1</a>
<a href="#" class="button2">button2</a>
</body>
</html>

.page1 .button1,
.page2 .button2{
color: red;
}

.page1 .button2,
.page2 .button1{
color: white;
}
<html>
<body class="page2">
<a href="#" class="button1">button1</a>
<a href="#" class="button2">button2</a>
</body>
</html>

Upvotes: 1

Related Questions