title: Call onClick Function On Multiple Elements
body: <p>I checked out some other posts on here but still couldn't get this issue to work.
  I have several elements in my html with the class cardContainer:</p>
  
  <pre><code>&lt;div class="cardContainer"&gt;
  &lt;div id="card2" class="block" onclick="changeClass()"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="cardContainer"&gt;
  &lt;div id="card3" class="block" onclick="changeClass()"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For each onClick event I would like to call this JS function:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  function changeClass(){
  if(document.getElementById("card2").className == "block")
  document.getElementById("card2").className += " rotated";
  
  else
  document.getElementById("card2").className = "block";
  }
  &lt;/script&gt; 
  </code></pre>
  
  <p>What I would like to do is include the card3 id, so it fires the same function on click. How would I be able to combine the ids "card2" and "card3" in the javascript so the function works?</p>
  
  <p>I get that if I use getElementById, I can only get one and not multiple ids/classes, but I tried using getElementsByClassName for example without success. Also looked at other posts but couldn't get this to work based on the suggestions... I am new to Javascript and not quite sure on how to approach this. </p>
  
  <p>Thanks for your help!</p>