Tips for changing the color of a button when clicked with multiple buttons present

Question

Tips for changing the color of a button when clicked with multiple buttons present

If I only have one button, changing its color is as simple as this:

<script>
var count = 1;
function setColor(btn, color) {
    var property = document.getElementById(btn);
    if (count == 0) {
        property.style.backgroundColor = "#FFFFFF"
        count = 1;        
    }
    else {
        property.style.backgroundColor = "#7FFF00"
        count = 0;
    }
}

But what if I have multiple buttons and want each to be able to change to any of three possible colors?

javascript

Answer 1

Answer №1

let counter = 1;
function changeColor(button, color) {
    let buttons = document.getElementsByClassName("button_class_name");
    for(let i = 0; i < buttons.length; i++) {
          buttons.item(i).style.backgroundColor = "#7FFF00"
    }
}

This function will update the background color of all buttons with the class "button_class_name" to "#7FFF00".

Answer 2

let counter = 1;
function changeColor(button, color) {
    let buttons = document.getElementsByClassName("button_class_name");
    for(let i = 0; i < buttons.length; i++) {
          buttons.item(i).style.backgroundColor = "#7FFF00"
    }
}

This function will update the background color of all buttons with the class "button_class_name" to "#7FFF00".

Answer 3

Answer №2

Here's a different approach to achieve the desired result. Use a Toggle feature with three different colors for all buttons. First, create an array of colors. Next, keep track of the number of clicks on each button by adding a data-count attribute to each button element. Then, compare the click count with the color array using this.dataset.count%col.length.

let count = 1;
document.querySelectorAll('button').forEach(function(btn){
btn.addEventListener('click', changeColor)
})

const col = ["#FFFFFF","#AAAAAA","#6A76A7"];
function changeColor() {
this.dataset.count= this.dataset.count >= 0 ? ++this.dataset.count : 0;
   this.style.backgroundColor = col[this.dataset.count%col.length] 
}

<button>one</button><br>
<button>two</button><br>
<button>three</button><br>
<button>four</button><br>
<button>five</button><br>
<button>six</button><br>
<button>seven</button><br>
<button>eight</button><br>
<button>nine</button><br>
<button>ten</button><br>

Answer 4

Here's a different approach to achieve the desired result. Use a Toggle feature with three different colors for all buttons. First, create an array of colors. Next, keep track of the number of clicks on each button by adding a data-count attribute to each button element. Then, compare the click count with the color array using this.dataset.count%col.length.

let count = 1;
document.querySelectorAll('button').forEach(function(btn){
btn.addEventListener('click', changeColor)
})

const col = ["#FFFFFF","#AAAAAA","#6A76A7"];
function changeColor() {
this.dataset.count= this.dataset.count >= 0 ? ++this.dataset.count : 0;
   this.style.backgroundColor = col[this.dataset.count%col.length] 
}

<button>one</button><br>
<button>two</button><br>
<button>three</button><br>
<button>four</button><br>
<button>five</button><br>
<button>six</button><br>
<button>seven</button><br>
<button>eight</button><br>
<button>nine</button><br>
<button>ten</button><br>

Answer 5

Answer №3

Perhaps you're in search of something along these lines.

HMTL

<button class="buttons" id="btn-1">Button1</button>
<button class="buttons" id="btn-2">Button2</button>
<button class="buttons" id="btn-3">Button3</button>
<button class="buttons" id="btn-4">Button4</button>
<button class="buttons" id="btn-5">Button5</button>

CSS

.buttons {
  border: none;
  background: transparent;

  padding: 10px 20px;
}

JS

// Alter the color of one button
function setButtonColor(btn, color) {
  btn.css({'background': color});
}

// Adjust the color of a group of buttons
function setButtonsColor(btns, colors) {
  $.each(btns, function (key, value) {
    setButtonColor($(value), colors);
  });
}

$(function(){

  setButtonsColor( $('.buttons'), 'gold')

  setButtonColor( $('#btn-1'), 'red' );
  setButtonColor( $('#btn-3'), 'purple' );

   $('.buttons').click(function(){
     setButtonColor( $(this), 'lightgreen' );
   });

});

Answer 6

Perhaps you're in search of something along these lines.

HMTL

<button class="buttons" id="btn-1">Button1</button>
<button class="buttons" id="btn-2">Button2</button>
<button class="buttons" id="btn-3">Button3</button>
<button class="buttons" id="btn-4">Button4</button>
<button class="buttons" id="btn-5">Button5</button>

CSS

.buttons {
  border: none;
  background: transparent;

  padding: 10px 20px;
}

JS

// Alter the color of one button
function setButtonColor(btn, color) {
  btn.css({'background': color});
}

// Adjust the color of a group of buttons
function setButtonsColor(btns, colors) {
  $.each(btns, function (key, value) {
    setButtonColor($(value), colors);
  });
}

$(function(){

  setButtonsColor( $('.buttons'), 'gold')

  setButtonColor( $('#btn-1'), 'red' );
  setButtonColor( $('#btn-3'), 'purple' );

   $('.buttons').click(function(){
     setButtonColor( $(this), 'lightgreen' );
   });

});

Answer 7

Answer №4

If you were to have a collection of ten buttons, you would assign a common class to all buttons and then bind events to each one individually as illustrated below.

 var classname = document.getElementsByClassName("btns");
    var count =1;
    var setColor = function() {
        var button = this;
        if (count == 0) {
            button.style.backgroundColor = this.getAttribute("data-color");
            console.log(this.getAttribute("data-color"))
            count = 1;        
        }
        else {
            button.style.backgroundColor = this.getAttribute("data-color");
             console.log(this.getAttribute("data-color"))
            count = 0;
        }
    };

    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', setColor, false);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="button" id="btn1" data-color="#7FFF00" value="btn1" class="btns">
    <input type="button" id="btn2" data-color="#7FFF00" value="btn2" class="btns">
    <input type="button" id="btn3" data-color="#FC0" value="btn3" class="btns">
    <input type="button" id="btn4" data-color="#FFFPPP" value="btn4" class="btns">
    <input type="button" id="btn5" data-color="#FC0" value="btn5" class="btns">
    <input type="button" id="btn6" data-color="#7FFF00" value="btn6" class="btns">
    <input type="button" id="btn7" data-color="#7FFF00" value="btn7" class="btns">
    <input type="button" id="btn8" data-color="#FC0" value="btn8" class="btns">
    <input type="button" id="btn9" data-color="#FFFPPP" value="btn9" class="btns">
    <input type="button" id="btn10" data-color="#FC0" value="btn10" class="btns">

If you wish for each button to have a different color, you can utilize data attributes like data-color='#FC0' and dynamically assign colors based on these attributes. For those with ES6 support, the last line can be replaced with:

Array.from(classname).forEach(function(element) {
  element.addEventListener('click', setColor);
});

Answer 8

If you were to have a collection of ten buttons, you would assign a common class to all buttons and then bind events to each one individually as illustrated below.

 var classname = document.getElementsByClassName("btns");
    var count =1;
    var setColor = function() {
        var button = this;
        if (count == 0) {
            button.style.backgroundColor = this.getAttribute("data-color");
            console.log(this.getAttribute("data-color"))
            count = 1;        
        }
        else {
            button.style.backgroundColor = this.getAttribute("data-color");
             console.log(this.getAttribute("data-color"))
            count = 0;
        }
    };

    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', setColor, false);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="button" id="btn1" data-color="#7FFF00" value="btn1" class="btns">
    <input type="button" id="btn2" data-color="#7FFF00" value="btn2" class="btns">
    <input type="button" id="btn3" data-color="#FC0" value="btn3" class="btns">
    <input type="button" id="btn4" data-color="#FFFPPP" value="btn4" class="btns">
    <input type="button" id="btn5" data-color="#FC0" value="btn5" class="btns">
    <input type="button" id="btn6" data-color="#7FFF00" value="btn6" class="btns">
    <input type="button" id="btn7" data-color="#7FFF00" value="btn7" class="btns">
    <input type="button" id="btn8" data-color="#FC0" value="btn8" class="btns">
    <input type="button" id="btn9" data-color="#FFFPPP" value="btn9" class="btns">
    <input type="button" id="btn10" data-color="#FC0" value="btn10" class="btns">

If you wish for each button to have a different color, you can utilize data attributes like data-color='#FC0' and dynamically assign colors based on these attributes. For those with ES6 support, the last line can be replaced with:

Array.from(classname).forEach(function(element) {
  element.addEventListener('click', setColor);
});

Answer 9

Answer №5

Implementing an object-oriented approach can facilitate easy expansion of functionality in the future.

From what I gather, each button is designed to cycle through different colors based on the number of times it has been clicked.

For instance, one click triggers red, two clicks trigger green...

// Testing with only 3 colors and buttons.
// Array of colors
var colorList = ['#f00','#0f0','#00f'];
// Initialize empty array for buttons
var buttonList = [];

// Keeps track of button clicks
var ButtonExtend = function buttonObj(id) {
  this.count = 0;
  if (document.getElementById(id)) {
    document.getElementById(id).addEventListener('click',buttonClick,false);
  }
};

// Function called on button click
function buttonClick() {
  this.style.backgroundColor = colorList[buttonList[this.id].count];
  buttonList[this.id].count++;
  if (buttonList[this.id].count >= colorList.length) {
    buttonList[this.id].count = 0;
  }
}

window.onload = function() {
  // IDs of the buttons
  var buttonId = ['b1','b2','b3'];
  for(x in buttonId) {
    buttonList[buttonId[x]] = new ButtonExtend(buttonId[x]);
  }
}

<button id="b1">button 1</button>
<button id="b2">button 2</button>
<button id="b3">button 3</button>

Answer 10

Implementing an object-oriented approach can facilitate easy expansion of functionality in the future.

From what I gather, each button is designed to cycle through different colors based on the number of times it has been clicked.

For instance, one click triggers red, two clicks trigger green...

// Testing with only 3 colors and buttons.
// Array of colors
var colorList = ['#f00','#0f0','#00f'];
// Initialize empty array for buttons
var buttonList = [];

// Keeps track of button clicks
var ButtonExtend = function buttonObj(id) {
  this.count = 0;
  if (document.getElementById(id)) {
    document.getElementById(id).addEventListener('click',buttonClick,false);
  }
};

// Function called on button click
function buttonClick() {
  this.style.backgroundColor = colorList[buttonList[this.id].count];
  buttonList[this.id].count++;
  if (buttonList[this.id].count >= colorList.length) {
    buttonList[this.id].count = 0;
  }
}

window.onload = function() {
  // IDs of the buttons
  var buttonId = ['b1','b2','b3'];
  for(x in buttonId) {
    buttonList[buttonId[x]] = new ButtonExtend(buttonId[x]);
  }
}

<button id="b1">button 1</button>
<button id="b2">button 2</button>
<button id="b3">button 3</button>

Tips for changing the color of a button when clicked with multiple buttons present

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to align these div elements within a table cell?

Is there a way to display an animation when a page loads using jQuery that only plays for index.php and not other_page.php?

When hovering over certain transitioning elements in a D3JS chart, the animation execution is paused if other elements are also in the process of transitioning

Can someone explain the significance of receiving a TypeError when trying to access properties of null (specifically 'useRef') in a React application?

When a React CSS class is deployed to a production server, it may be automatically

Repeating items must be unique; duplicates are not permitted on ng-repeat

React slick does not display arrows when there are 4 or more photos

Exploring jQuery Sortable: Navigating Drag-and-Drop Functionality with Cl

Revamp the table layout for mobile with a unified markup structure

Can AngularJS support HTML5-mode URL routing in locally stored files (using the file:// protocol)?

I am having an issue with an input field not reflecting the data from the Redux state in my React app,

Converting an HTML <img> tag into a Base64 encoded image file: Step-by-step guide

Triggering an event from a component to its parent module resulting in an exception situation

Utilize JavaScript to compute and implement a deeper shade of background color

Is there a way to remove text from a div when the div width is reduced to 0?

Variable scope not properly maintained when there is a change in the Firebase promise

Utilizing Mongoose aggregation for counting and grouping operations

Creating a dynamic HTML table using Vue 3

Animated div or fieldset featuring a multi-step form

javascript strange behavior observed with multidimensional array