Q:

Change color of all elements in class on click JavaScript

I have an image (SVG) of a human body. I would like to use JavaScript so that when I click a particular area (say, the lower leg) then all of the elements with the class "lower-leg" (even if not clicked) have their color changed -- this makes it much easier for the user.
Here is the JavaScript I currently have:
function changeclassstyle() {
  var c = document.getElementsByClassName("lower-leg");
  for (var i=0; i<c.length; i++) {
    c[i].style.fill = "red";
  }
}

The problem with this code is that it is only generalized for "lower-leg". I may have over a dozen classes I would like this to work for and don't think it is efficient to write 12 functions with the only change being the class name. Is there a way to grab what class was selected and then input that in the function?
--
Additionally, I would love to figure out how, once that section of the body is selected, I can store the class name. I would, in the end, want to store the selection, along with other inputted information in a database. But, this may be for a future question unless someone can help!

A:

Here's how I would do it (tested on a couple of div's).  
What we're doing is passing the event object to the event handler (your changeclassstyle() function). It then uses the class of the clicked-on item (the event target's class) and changes everything else on that page with that same class name to use your new desired CSS style.
 function changeclassstyle(e) {

           // Get all items that have the same class as the item that was clicked
            var limbs = document.getElementsByClassName(e.target.className); // for div's and the like

           // var limbs = document.getElementsByClassName(e.target.className.baseVal); // turns out this is needed for SVG items 

           // "limbs" is an HTMLCollection, not an array, so functions like .foreach won't work; C-style for-loops or modern for/let/of loops are better

            for (let item of limbs) {
                item.style.backgroundColor = 'red'; 
              // item.style.fill = 'red';  // This is probably what you need for your SVG items
            }

         // You could still use your C-style for loop if needed/wanted
            /*
               for (var i=0; i<limbs.length; i++) {
                limbs[i].style.fill = "red";
               }
            */
        }

The onchange call looks like this (using my div as the example):
        <div class="upper-arm" onclick="changeclassstyle(event)">
        </div>

        <div class="lower-leg" onclick="changeclassstyle(event)">
        </div>

The whole example with simple div's.
<html>
    <head><title>stuff</title></head>
    <body>
        <script type="text/javascript">
        function changeclassstyle(e) {
            // For debugging. You may want to expand 'e' here in your browser's debug tools if you're not seeing the values you need/want
            console.log(e)
            var limbs = document.getElementsByClassName(e.target.className.baseVal);
            for (let item of limbs) {
                item.style.backgroundColor = 'red';  
            }
        }
        </script>

        <style type="text/css">
        div {
            height: 100px;
            width: 100px;
            background-color: 'white';
            border: 1px solid black;
        }
        </style>

        <div class="upper-arm" onclick="changeclassstyle(event)">
        </div>
        <div class="upper-arm" onclick="changeclassstyle(event)">
        </div>
        <div class="upper-arm" onclick="changeclassstyle(event)">
        </div>

        <div class="lower-leg" onclick="changeclassstyle(event)">
        </div>
        <div class="lower-leg" onclick="changeclassstyle(event)">
        </div>
        <div class="lower-leg" onclick="changeclassstyle(event)">
        </div>
    </body>
</html>

