如何识别点击的buttonsColor类按钮并对其执行颜色修改等操作？

Absolutely! Using addEventListener is the cleanest, most maintainable approach here—it lets you avoid hardcoding indexes and keeps your logic separated from your HTML. Here's how to implement it step by step:

Step 1: Retrieve All Buttons #

First, grab all elements with the buttonsColor class. document.querySelectorAll is ideal here because it returns a NodeList that’s easy to loop through with forEach:

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

Step 2: Attach Click Listeners to Each Button #

Loop through every button and add a click event listener. Inside the listener function, this will directly reference the clicked button, or you can use event.target if you prefer:

buttons.forEach(button => {
  button.addEventListener('click', function() {
    // Modify the clicked button's styles
    this.style.backgroundColor = '#2ecc71'; // Example: green background
    this.style.color = '#ffffff'; // White text
    this.style.border = '2px solid #27ae60';
    
    // Alternatively, use event.target:
    // event.target.style.backgroundColor = '#2ecc71';
  });
});

If You Want to Keep Inline onclick Handlers #

If you’d rather keep your existing inline functions, you can modify them to accept the event object, which lets you access the clicked button:

Updated HTML: #

<button class="buttonsColor" type="button" onclick="starterMenu(event);">Starter</button>
<button class="buttonsColor" type="button" onclick="menuM(event);">Main</button>
<button class="buttonsColor" type="button" onclick="menuDessert(event);">Dessert</button>

Updated JavaScript: #

function starterMenu(event) {
  const clickedBtn = event.target;
  clickedBtn.style.backgroundColor = '#3498db';
  // ... rest of your starter menu logic
}

function menuM(event) {
  const clickedBtn = event.target;
  clickedBtn.style.backgroundColor = '#3498db';
  // ... rest of your main menu logic
}

function menuDessert(event) {
  const clickedBtn = event.target;
  clickedBtn.style.backgroundColor = '#3498db';
  // ... rest of your dessert menu logic
}

Note: Inline handlers are less flexible than addEventListener (you can’t easily add multiple listeners to the same event, and it mixes HTML/JS), so the first approach is generally recommended.

Bonus: Reset Other Buttons (Single Active State) #

If you want only the clicked button to have the modified color (resetting others to default), add this logic inside the listener:

buttons.forEach(button => {
  button.addEventListener('click', function() {
    // Reset all buttons to default styles
    buttons.forEach(btn => {
      btn.style.backgroundColor = ''; // Reverts to original CSS
      btn.style.color = '';
      btn.style.border = '';
    });
    // Apply active styles to the clicked button
    this.style.backgroundColor = '#e74c3c';
    this.style.color = '#ffffff';
  });
});

内容的提问来源于stack exchange，提问作者liran