title: addEventListener with multiple elements
body: <p>I started working with <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged &#39;javascript&#39;" rel="tag">javascript</a>.
  I have two <strong>buttons</strong>, and want change <strong>backgroundColor</strong> when click on any of these buttons.
  But my code doesn't work.
  This is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementsByTagName("button").addEventListener("click", function(){
      func(this)
  });
  
  function func(element){
      element.style.backgroundColor="gray";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="area"&gt;
      &lt;button type="button" class="btn" id="btn1"&gt;Play With Me!&lt;/button&gt;
      &lt;button type="button" class="btn" id="btn2"&gt;Play With Me!&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>is there any way that an <code>addEventListener</code> works with multiple elements?</p>