如何更改我单击的特定按钮的此按钮背景颜色？使用 javascript

Question

我想更改我点击的特定按钮的背景颜色，是否需要使用循环和条件？我尝试访问第一个索引，但我不知道如何更改其他按钮的背景颜色。

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 class="wrapper">
  <button class="btn seat" value="A">A</button>
  <button class="btn seat" value="B">B</button>
  <button class="btn seat" value="C">C</button>
  <button class="btn seat" value="D">D</button>
  <button class="btn seat" value="E">E</button>
  <button class="btn seat" value="F">F</button>
</div>

Answer 1

使用循环从其他按钮中删除 bgcolor 然后将其添加到单击的按钮。

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 class="wrapper">
  <button class="btn seat" value="A">A</button>
  <button class="btn seat" value="B">B</button>
  <button class="btn seat" value="C">C</button>
  <button class="btn seat" value="D">D</button>
  <button class="btn seat" value="E">E</button>
  <button class="btn seat" value="F">F</button>
</div>

Answer 2

您正在以正确的方式接近它。您只需要遍历所有按钮并重置它们的背景，然后更改您单击的按钮的背景。

我在这个例子中使用 classList 和 CSS。

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 class="wrapper">
  <button class="btn seat" value="A">A</button>
  <button class="btn seat" value="B">B</button>
  <button class="btn seat" value="C">C</button>
  <button class="btn seat" value="D">D</button>
  <button class="btn seat" value="E">E</button>
  <button class="btn seat" value="F">F</button>
</div>

Answer 3

我认为您不需要所有这些（循环和条件），也不需要创建另一个数组。

首先，我建议您使用 CSS class 来更改任何样式，甚至是动态更改：

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

所以现在的逻辑是单击按钮时“如果上面有 active class，则删除活动的 class，否则附加 active class.

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

你的脚本开头不错：

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

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

Answer 4

你为什么不安装jquery，你可以轻松实现。

只需将其放入您的 html header 并尝试

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

在你的JS中，这样写

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

如何更改我单击的特定按钮的此按钮背景颜色？使用 javascript

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

javascript

html

arrays

simple-html-dom