Using Javascript and JQuery to alter CSS properties: JQuery cannot alter properties that Javascript has already altered?

Question

Here's what I'm trying to achieve: I have four buttons in a list and each button has a white background and a unique colour border. When one button is clicked its background becomes the same colour as its border. When a second button is clicked the first button returns to normal and the second buttons background gets filled with the second buttons border colour. Each button has the id "navX" where X is a number from 1 to 4.

I have been using a mix of jQuery and javascript to achieve this. I was trying to use jQuery on click to set all button backgrounds to white and trying to use javascript to fill in the clicked buttons background. This is because I know jQuery allows you to gather all elements with a common id string:

$('[id^=nav]').css({"background":"#FFFFFF", "color":"#000000"});

whilst with javascript I can pass the clicked id and a colour parameter to the function:

<a id="nav1" onclick="changeHeaderColour(this, '#f0e442')"> Button 1 </a>

function changeHeaderColour(navItem, newColor) {

document.getElementById(navItem.id).style.backgroundColor = newColor;
document.getElementById(navItem.id).style.color = newColor;

}

I have been playing around with mixtures of ways of combining these, varying which selectors to use, and tampering with the core CSS and I am stuck achieving one of two things:

When a button is clicked, it gets stuck permanently with a filled in background. Continuing to click buttons finishes with all buttons stuck filled in.
When a button is clicked, all buttons get stuck permantently with a white background.

I really have no idea how else to achieve this. I just can't seem to get the hang of finding the correct mix of CSS levels that don't override each other. I haven't used jQuery's addClass() method since each class needs a unique colour. If anyone has any advice at all that would be great - it seems like a simple task and I was determined to achieve it on my own but I have been going at this for hours now!

Thanks for any help!

Side note (doesn't fix your problem): You don't need this: document.getElementById(navItem.id), navItem will already be the element you are passing. — Patrick Evans
– Patrick Evans, Commented Jun 18, 2017 at 16:24
Ah yes, a remnant of my desperation in explicitly declaring things hoping for some magic solution. — Jonathan
– Jonathan, Commented Jun 18, 2017 at 16:31

Andreas · Accepted Answer · 2017-06-18 16:38:10Z

2

There's no need for the mix of jQuery, vanilla JS and inline scripts.

$("a.button").on("click", function(ev) {
  ev.preventDefault();

  // "reset" the background color of all "buttons"
  $("a.button").css("background-color", "");

  // change the background color of the clicked button to the same color as its border
  var button = $(this);
  button.css("background-color", button.css("border-color"));
});

a.button {
  background-color: #fff;
  padding: 5px;
  border-style: solid;
  border-width: 1px;
}

#nav1 { border-color: #f00 }
#nav2 { border-color: #0f0 }
#nav3 { border-color: #00f }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="nav1" class="button">Button 1</a>
<a id="nav2" class="button">Button 2</a>
<a id="nav3" class="button">Button 3</a>

answered Jun 18, 2017 at 16:38

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Renan Souza · Accepted Answer · 2017-06-18 16:39:42Z

1

Add a class to the buttons, for example "colored-button", then where you put the color in the button, do this:

function changeHeaderColour(navItem, newColor) {
$(".colored-button").css({"background":"#FFFFFF", "color":"#000000"}); //Remove whatever colors may be setted in any of these buttons and apply the desired style to the clicked element.

document.getElementById(navItem.id).style.background = newColor;
document.getElementById(navItem.id).style.color = newColor;

}

edited Jun 18, 2017 at 16:39

answered Jun 18, 2017 at 16:20

Renan Souza

9159 silver badges25 bronze badges

6 Comments

Jonathan Over a year ago

Possibly a silly question, but can I combine jquery and javascript in a single function like that if using a seperate .js file? I was hoping to keep as many things seperate as possible, i.e, html, javascript, css all in different files.

Renan Souza Over a year ago

Yes, you can. But you must first load the jQuery file, then yours. Please mark as accepted if that helps you :D

Jonathan Over a year ago

Hrmm, it's still producing the first outcome I described in my post - the buttons don't get returned to a white background. I did try this solution before. I removed the link to my separate .js file and put it all inside <script> tags in the head to try and emulate your code exactly and had the same issue.

Renan Souza Over a year ago

Oh, it's my mistake. See where we're setting the white color? We're doing:"background": "#FFFFFF" and below that, when setting the colored one, "backgroundColor": "color". Make them both the same and it will work.

Jonathan Over a year ago

I'm not sure what you mean by "make them both the same" - do you mean not use document.getElementById() ?

|

Gerard · Accepted Answer · 2017-06-18 16:39:04Z

1

Is this what you are looking for?

/* Detection of a click event for a button */
$(document).on("click", "button", function() {
  resetButtons();
/* Retrieve the border color from clicked button */  
  var borderColor = $(this).css("border-color");
/* Assign border color to background */
  $(this).css("background-color", borderColor);
});

/* Reset buttons to default */
function resetButtons() {
/* White background, black characters */
  $("button").css({
    "background": "white",
    "color": "black"
  });
  /* Color set for buttons 1 - 4 */
  $("#nav1").css("border", "medium solid red");
  $("#nav2").css("border", "medium solid darkgreen");
  $("#nav3").css("border", "medium solid darkgray");
  $("#nav4").css("border", "medium solid orange");
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav1">Button 1</button>
<button id="nav2">Button 2</button>
<button id="nav3">Button 3</button>
<button id="nav4">Button 4</button>

edited Jun 18, 2017 at 16:39

answered Jun 18, 2017 at 16:32

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

1 Comment

Jonathan Over a year ago

YES. Would you mind describing a little how it works? I've actually yet to explore ajax myself.

Collectives™ on Stack Overflow

Using Javascript and JQuery to alter CSS properties: JQuery cannot alter properties that Javascript has already altered?

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related