如何修复点击切换div透明度的TypeError问题（支持多div激活）

Let's break down what's going wrong and fix your code step by step so you can toggle multiple divs' opacity on click.

First: The Root Cause of the TypeError #

Your error Uncaught TypeError: divFlags.getElementsByTagName is not a function happens because:

• document.getElementsByClassName("flags") returns an HTMLCollection (a list-like collection of elements), not a single DOM element. You can't call getElementsByTagName directly on this collection—you need to either target individual elements in the collection or use a better selector to grab your .flag elements directly.

Second: Fixing the CSS Selector #

Your current CSS rule .flags .flag > div.active is targeting a child div inside .flag, but your HTML has img as the only child of .flag. We need to adjust this to apply opacity to the .flag itself when it has the active class.

Third: Rewriting the JavaScript for Reliability #

Instead of dealing with HTMLCollections (which are live and can cause unexpected behavior), use document.querySelectorAll() to get all your .flag elements in one go. We'll also simplify the click handler to toggle the active class cleanly.

Fixed Full Code #

HTML (no changes needed here, just keeping it for context)

<div class="flags">
 <div class="flag" >
  <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
 </div>
 <div class="flag">
  <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
 </div>
 <div class="flag">
  <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
 </div>
 <div class="flag">
  <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
 </div>
 <div class="flag">
  <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
 </div>
</div>

Fixed CSS

.flags { display: inline-block; }
.flags .flag { 
  display: inline-block; 
  padding: 10px; 
  opacity: 0.3;
  transition: opacity 0.2s ease; /* Optional: Add smooth transition */
}
.flags .flag:hover { cursor: pointer; }
.flags .flag.active { opacity: 1; } /* Target the .flag itself when active */

Fixed JavaScript

// Grab all .flag elements directly
const flags = document.querySelectorAll(".flags .flag");

// Loop through each flag and add click handler
flags.forEach(flag => {
  flag.addEventListener("click", () => {
    // Toggle the 'active' class on the clicked flag
    flag.classList.toggle("active");
  });
});

Key Changes Explained #

1. Selector Fix: Used document.querySelectorAll(".flags .flag") to directly get all target elements, avoiding the HTMLCollection issue entirely.
2. Class Toggle: Replaced the if/else check with classList.toggle("active")—a cleaner, built-in method to add/remove a class based on its current presence.
3. CSS Adjustment: Changed the active selector to target .flag.active so the opacity applies correctly to the clickable div.
4. Optional Transition: Added a transition property to CSS for a smooth opacity animation (you can remove this if you don't want it).

This code will let you click any number of .flag divs to toggle their opacity between 0.3 and 1, with multiple divs able to stay active at the same time.

内容的提问来源于stack exchange，提问作者A. Vreeswijk