CODEWITHSUNDEEP
jquerycssbackground-color
user7353167
user7353167

Reputation:

Nicer way to change color of multiple buttons

i used jQuery to change the color of my buttons based on a click event. The code works and is "easy" to read, but i guess pretty horrible, when i will later have 20+Buttons which will also manipulate HTML.

function R1() {
    $("#R1").css("background-color", "red")
  $("#R2").css("background-color", "green")
  $("#R3").css("background-color", "green")
  $("#R4").css("background-color", "green")
  $("#R5").css("background-color", "green")
  }

function R2() {
  $("#R1").css("background-color", "green")
  $("#R2").css("background-color", "red")
  $("#R3").css("background-color", "green")
  $("#R4").css("background-color", "green")
  $("#R5").css("background-color", "green")
  }

function R3() {
  $("#R1").css("background-color", "green")
  $("#R2").css("background-color", "green")
  $("#R3").css("background-color", "red")
  $("#R4").css("background-color", "green")
  $("#R5").css("background-color", "green")
  }
function R4() {
  $("#R1").css("background-color", "green")
  $("#R2").css("background-color", "green")
  $("#R3").css("background-color", "green")
  $("#R4").css("background-color", "red")
  $("#R5").css("background-color", "green")
  }

function R5() {
  $("#R1").css("background-color", "green")
  $("#R2").css("background-color", "green")
  $("#R3").css("background-color", "green")
  $("#R4").css("background-color", "green")
  $("#R5").css("background-color", "red")
  }


document.getElementById("R1").addEventListener("click", R1)
document.getElementById("R2").addEventListener("click", R2)
document.getElementById("R3").addEventListener("click", R3)
document.getElementById("R4").addEventListener("click", R4)
document.getElementById("R5").addEventListener("click", R5)

Can you help me to write that in a good programming style?

Upvotes: 1

Views: 1398

Answers (5)

Fla
Fla

Reputation: 627

The clean way is to use CSS classes, not to set css directly. That way you can easily change more CSS properties than only one (for example, changing also the border.

So, you would define something like this in your css file:

button {
  background-color: green;
  border: solid 1px black;
}

.selected {
  background-color: red;
  border: solid 1px yellow;
}

Then use javascript to add the class to the clicked button, and remove it for the others.

  $(document).ready(function(){
    $('button').click(function(){
      $('button').removeClass('selected');
      $(this).addClass('selected');
    });
  });

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

As you are using JQuery, you can simply attach the click event to the button and when it is clicked change the background-color to red for this button and set the background-color of other buttons, except this, to green

$(document).ready(function(){
  $('button').click(function(){
    $(this).css("background", "red").siblings().css("background", "green");
  });
});
button {
  background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='R1'>Click R1</button>
<button id='R2'>Click R2</button>
<button id='R3'>Click R3</button>
<button id='R4'>Click R4</button>
<button id='R5'>Click R5</button>

Upvotes: 2

Ryan Wilson
Ryan Wilson

Reputation: 10765

Give all your buttons the same class attribute, so for example in your HTML class="myButtons", then you could write one function which takes an index value of the button you want to change the color on:

//Pass in the index of the button who's color needs changed and the color to change it to
function ChangeButtonColor(index, color){
    //Grab all buttons with JQuery selector
    const buttons = $('.myButtons');
    //Change the color of the button at said index to color passed
    $($(buttons)[index]).css('background-color', color);
}

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can attach the single click event to all elements and set green/red color in click event based on clicked elements context(this):

var $ugSeriesDom = $('[id^=R]');
$ugSeriesDom.click(function(){
  $ugSeriesDom.css("background-color", "green");
  $(this).css("background-color", "red");
});

Working Demo

Upvotes: 0

Splatbang
Splatbang

Reputation: 776

You could make a function that takes a selector and a color as argument.

function changeColor(selector, color) {
  $(selector).css('background-color', color);
}

and call it like this:

changeColor('button', 'blue');

or

changeColor('button', '#0000FF');

in the click event you can just set the color of every button to red and then color of the clicked button to something else. You don't even need a function for that, you can just do it directly with jQuery.

Upvotes: 1

Related Questions