How can I change this button background color of the specific button that i have clicked? using java-CodePudding

I want to change the button's background color of the specific button that I have clicked, do I need to use loops and also condition? I tried to access the first index but I don't know how can I change the other button's background color.

let buttons = document.querySelectorAll('.btn');

let arraySelected = [];

buttons.forEach(button => {
  button.addEventListener('click', seatFunction);
});


function seatFunction(e) {

  const {
    value
  } = e.target;
  let newArray = arraySelected;
  const index = arraySelected.findIndex((element) => element === value);

  let findValue = arraySelected.find((element) => element == value);

  if (index !== -1) {
    console.log(`The ${value} has been removed into the array.`);
    // console.log(`The ${index} is the '${value}' of the item that has been removed.`);    
    newArray.splice(index, 1);
    console.log(newArray);
    buttons[0].style.backgroundColor = null;

  } else {
    console.log(`${value} has been pushed into the array.`)
    arraySelected.push(value);
    console.log(arraySelected);
    buttons[0].style.backgroundColor = "red";

  }

  // Checking if the array is empty.
  if (arraySelected.length === 0) {
    alert(`The last value '${value}' has been removed\r\nThe array now is empty!`);

  }
}

<div >
  <button  value="A">A</button>
  <button  value="B">B</button>
  <button  value="C">C</button>
  <button  value="D">D</button>
  <button  value="E">E</button>
  <button  value="F">F</button>
</div>

CodePudding user response：

You're approaching it the right way. You just need to loop over all the buttons and reset their background, and then change the background of the button you clicked on.

I'm using classList and CSS for this example.

const buttons = document.querySelectorAll('.btn');

buttons.forEach(button => {
  button.addEventListener('click', seatFunction, false);
});

function seatFunction() {
  buttons.forEach(btn => btn.classList.remove('active'));
  this.classList.add('active');
}

.active { background-color: Tomato; }
.btn:hover { cursor: pointer; }

<div >
  <button  value="A">A</button>
  <button  value="B">B</button>
  <button  value="C">C</button>
  <button  value="D">D</button>
  <button  value="E">E</button>
  <button  value="F">F</button>
</div>

CodePudding user response：

Use loop to remove bgcolor from other buttons then add it to clicked button.

let buttons = document.querySelectorAll('.btn');

let arraySelected = [];

buttons.forEach(button => {
  button.addEventListener('click', function() {
    seatFunction(button)
  });
});

function seatFunction(a) {
  buttons.forEach(button => {
    button.style.background = "none";
  });

  a.style.background = "red";
}

<div >
  <button  value="A">A</button>
  <button  value="B">B</button>
  <button  value="C">C</button>
  <button  value="D">D</button>
  <button  value="E">E</button>
  <button  value="F">F</button>
</div>

CodePudding user response：

I think you do not need all of that (loop and condition), and you do not need to create another array.

First, I advise you to work with CSS class in order to change any style, even dynamically:

.active {
    background-color: #00d4b1;
}

So now the logic is when a button is clicked "if there is the active class on it, remove the active class, else attach the active class."

function seatFunction(e){
    e.target.classList.toggle("active");
}

The beginning of your script is good:

let buttons = document.querySelectorAll('.btn');

buttons.forEach(button => {
    button.addEventListener('click', seatFunction);
});

CodePudding user response：

Why don't you install jquery, you can achieve this easily.

just put this in your html header and try

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

In your JS, put like this

$('.btn').click(function(){
   $('.btn').css({"background":""});
   $(this).css({"background":"red"}); //put the color you want
});