title: Javascript: can't apply event listener to class?
body: <p>i'm having problems applying an event listener to a class. If i try using ID, it works, but if i try with class, nothing happens.
  I have four div's, all exactly equal. I want to change the one i click, but keeping the other three without change.
  Is it possible?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="card"&gt;
      - 6 pièces, dont 3 aveugles.
      - Cuisine - électroménagers intégrés.
      - 2 salles de bains modernes.
  &lt;/div&gt;
  &lt;div id="ui" class="card"&gt;
      - 6 pièces, dont 3 aveugles.
      - Cuisine - électroménagers intégrés.
      - 2 salles de bains modernes.
  &lt;/div&gt;
  &lt;div class="card"&gt;
      - 6 pièces, dont 3 aveugles.
      - Cuisine - électroménagers intégrés.
      - 2 salles de bains modernes.
  &lt;/div&gt;
  &lt;div class="card"&gt;
      - 6 pièces, dont 3 aveugles.
      - Cuisine - électroménagers intégrés.
      - 2 salles de bains modernes.
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.card {
     height: 100px;
     width: 245px;
     float: left;
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     font-size: 0.85em;
     line-height: 1.5em;
     margin: 15px;
     overflow: hidden;
     border-radius: 5px;
    }
  
  .expandCard {
    height:500px;
    width: 245px;
    float: left;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    font-size: 0.85em;
    line-height: 1.5em;
    margin: 15px;
    border-radius: 5px;
  }
  </code></pre>
  
  <p>JS
  this doesn't work</p>
  
  <pre><code>var teste = document.getElementsByClassName("card");
  teste.addEventListener("click", function changeSize() {
     teste.className = "expandCard";
  });
  </code></pre>
  
  <p>this works for the element with the ID("ui")</p>
  
  <pre><code>var teste = document.getElementByID("ui");
  
  teste.addEventListener("click", function changeSize() {
     teste.className = "expandCard";
  });
  </code></pre>