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!

Answer 1

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> 

Answer 2

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; } 

Answer 3

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>