CODEWITHSUNDEEP
javascriptcssangulartypescript
manish joshi
manish joshi

Reputation: 55

How to change background color of button while clicking on it

I have a input box which consists of many buttons. i want it to behave like when clicking on a button i want that button row's background to be changed and revert it when clicking on other button. I tried many approach but nothing works.

Can anyone help me in this scenario?Attached image is the reference where in input box buttons are there when clicking on particular button button row's background changes

Here is my code:

var buttons = document.querySelectorAll(".green");
for (button in buttons) {
  buttons[button].onclick = function() {
    console.log('test') var yellowButton = document.querySelectorAll(".yellow")[0];
    if (this.className == "green") {
      if (yellowButton) yellowButton.className = "green";
      this.className = "yellow";
    }
  }
}

Upvotes: 1

Views: 183

Answers (1)

xGeo
xGeo

Reputation: 2139

Are you trying to do some sort of toggling like this?

function myFunc(btn) {
  //get the current active button
  var activeBtn = document.querySelector('button.active-btn');
  if (activeBtn) {
    activeBtn.classList.remove('active-btn'); //remove the .active-btn class
  }
  btn.classList.add('active-btn'); //add .active-btn class to the button clicked
}
.active-btn.green {
  background-color: green;
}

.active-btn.yellow {
  background-color: yellow;
}

.active-btn.red {
  background-color: red;
}

.active-btn.blue {
  background-color: blue;
}

button {
  color: orange
}
<div>
  <button type="button" class="red" onclick="myFunc(this)">Red</button>
  <button type="button" class="blue" onclick="myFunc(this)">Blue</button>
  <button type="button" class="green" onclick="myFunc(this)">Green</button>
  <button type="button" class="yellow" onclick="myFunc(this)">Yellow</button>
</div>

You can also try adding a default "active-btn" class to the button you want and also adding a disable/enable effect like so:

function myFunc(btn) {
  //remove .active-btn class if button is currently active
  if (btn.className.indexOf('active-btn') !== -1) {
    btn.classList.remove('active-btn');
  } else {
    //get the current active button
    var activeBtn = document.querySelector('button.active-btn');
    if (activeBtn) {
      activeBtn.classList.remove('active-btn'); //remove the .active-btn class on currently active button
    }
    btn.classList.add('active-btn'); //add .active-btn class to the button clicked if not active
  }
}
.active-btn.green {
  background-color: green;
}

.active-btn.yellow {
  background-color: yellow;
}

.active-btn.red {
  background-color: red;
}

.active-btn.blue {
  background-color: blue;
}

button {
  color: orange
}
<div>
  <button type="button" class="active-btn red" onclick="myFunc(this)">Red</button>
  <button type="button" class="blue" onclick="myFunc(this)">Blue</button>
  <button type="button" class="green" onclick="myFunc(this)">Green</button>
  <button type="button" class="yellow" onclick="myFunc(this)">Yellow</button>
</div>

Upvotes: 1

Related Questions