title: How to handle event from multiple buttons of same name
body: <p>I am working on a small practice program where I have 3 white boxes in a row.  My goal is (using Javascript) for any of the boxes to change from white to red when the mouse is over the box, and then to turn yellow when the mouse comes off the box.  The code below works on the initial box but not on the other two.  When I put the mouse over the other boxes, it doesn't change them but it does change the color on the inital box.  I've looked at similar questions but most of them involve jquery, which I am not using.  I've done some research and possible solutions might involve using addEventListener or using "this".  I don't want to give different names to the button id's and write additional procedures based on them -- that would be inefficient.  I know there must be a more efficient way.  Any advice is appreciated.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Whiteboxes 5&lt;/title&gt;
      &lt;script type="text/javascript"&gt;     
      function changeColorOnMouseOver()
       {
      var control=document.getElementById("btn");
      control.style.background='red';
       }
       function changeColorOnMouseOut()
       {
      var control=document.getElementById("btn");
      control.style.background='yellow';
       }
      &lt;/script&gt;
      &lt;link rel="stylesheet" href="css/app5.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;input type="button" value="" id="btn"
        onmouseover="changeColorOnMouseOver()"
        onmouseout="changeColorOnMouseOut()"/&gt;
  
      &lt;input type="button" value="" id="btn"
        onmouseover="changeColorOnMouseOver()"
        onmouseout="changeColorOnMouseOut()"/&gt;
  
      &lt;input type="button" value="" id="btn"
        onmouseover="changeColorOnMouseOver()"
        onmouseout="changeColorOnMouseOut()"/&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>