如何实现按钮点击时改变颜色？——3个指定按钮的变色需求及现有HTML代码求助

Hey there! Let's get those buttons changing colors when clicked. Here are a few solid approaches using vanilla JavaScript that work perfectly with your existing HTML:

Approach 1: Individual Event Listeners (Simple & Direct) #

This method binds a click event to each button explicitly, which is great for a small number of buttons like yours. Replace the empty <script> tag in your HTML with this code:

document.addEventListener('DOMContentLoaded', function() {
  // Grab each button by its ID
  const yesButton = document.getElementById('q1button');
  const noButton = document.getElementById('q2button');
  const maybeButton = document.getElementById('q3button');

  // Yes button turns green on click
  yesButton.addEventListener('click', function() {
    this.style.backgroundColor = 'green';
    this.style.color = 'white'; // Optional: Make text white for better contrast
  });

  // No button turns red on click
  noButton.addEventListener('click', function() {
    this.style.backgroundColor = 'red';
    this.style.color = 'white';
  });

  // Maybe button turns red on click
  maybeButton.addEventListener('click', function() {
    this.style.backgroundColor = 'red';
    this.style.color = 'white';
  });
});

Notes: #

• DOMContentLoaded ensures we don't try to access buttons before the page finishes loading.
• Using this refers directly to the button that was clicked, making the code clean and concise.

Approach 2: Event Delegation (Scalable & Efficient) #

If you might add more buttons later, event delegation is a smarter choice. We only bind one event to the parent container, then check which button was clicked:

document.addEventListener('DOMContentLoaded', function() {
  // Get the parent container of the buttons
  const buttonSection = document.querySelector('.section');

  buttonSection.addEventListener('click', function(e) {
    // Only act if the clicked element is a button
    if (e.target.tagName === 'BUTTON') {
      const buttonText = e.target.textContent.trim();
      
      if (buttonText === 'Yes') {
        e.target.style.backgroundColor = 'green';
      } else if (buttonText === 'No' || buttonText === 'Maybe') {
        e.target.style.backgroundColor = 'red';
      }
      e.target.style.color = 'white';
    }
  });
});

Notes: #

• This works even if you add new buttons to the .section div later—no need to update the JS.
• e.target gives us the exact element that was clicked.

Pro Tip: Use CSS Classes (Better Maintainability) #

Instead of setting styles directly in JS, define CSS classes for the colors. This keeps your styles and logic separated, making it easier to update later.

First, add these classes to your styles.css:

.btn-green {
  background-color: green;
  color: white;
}

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

Then update your JS to add/remove these classes instead of setting inline styles. For example, the event delegation version would become:

document.addEventListener('DOMContentLoaded', function() {
  const buttonSection = document.querySelector('.section');

  buttonSection.addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
      const buttonText = e.target.textContent.trim();
      
      // Remove any existing color classes first
      e.target.classList.remove('btn-green', 'btn-red');
      
      if (buttonText === 'Yes') {
        e.target.classList.add('btn-green');
      } else if (buttonText === 'No' || buttonText === 'Maybe') {
        e.target.classList.add('btn-red');
      }
    }
  });
});

This way, if you want to change the green or red shade later, you only need to edit the CSS—no touching the JavaScript!

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