title: How to change button hover color dynamically through javascript?
body: <p>I want to change all my buttons' hover color to match the theme of my websites.  I have a default color, but need to change it depending on the referring page.  I'm able to get the referrer page, but I can't figure out how to change the hover style.  This is what I have:</p>
  <pre><code>var btn = {
              hover: function (event) {
                  event.target.style.backgroundColor = &quot;blue&quot;;
              },
              out: function (event) {
                  event.target.style.backgroundColor = &quot;white&quot;;
              }
  
          }
  
  var element = document.getElementsByTagName('button');
          element.addEventListener(&quot;mouseover&quot;, btn.hover, false);
          element.addEventListener(&quot;mouseout&quot;, btn.out, false);
  
  HTML:
  &lt;div&gt;
     &lt;button class=&quot;accountButton firstButton&quot; id=&quot;FacebookExchange&quot;&gt;&lt;/button&gt;
  &lt;/div&gt;
  
  Default Style:
      .unified_container .row .panel-default #api .localAccount .entry .buttons button {
          float: left;
          background-image: none;
          background-color: #f4f4f4;
          border-radius: 0.2rem;
          cursor: pointer;
          display: inline-block;
          font-size: 1em;
          font-weight: 400;
          height: inherit;
          line-height: 1.3333333;
          margin-top: 3rem;
          margin-right: 0px;
          margin-left: 0px;
          padding: 10px 16px;
          text-align: center;
          touch-action: manipulation;
          user-select: none;
          vertical-align: middle;
          white-space: nowrap;
          width: inherit;
          -moz-user-select: none;
          -ms-touch-action: manipulation;
          -ms-user-select: none;
          -webkit-user-select: none;
          color: #000;
          width: 100%;
      }
          .unified_container .row .panel-default #api .localAccount .entry .buttons button:hover {
              -moz-box-shadow: none;
              -webkit-box-shadow: none;
              box-shadow: none;
              background-color: #d40000;
              color: #fff;
          }
  </code></pre>
  <p>The error message I get &quot;element.addEventListener is not a function&quot;.</p>
  <p>How do I change the button hover color?</p>
  <p>PS  I can't write inline css, javascript or html in the buttons because the buttons are dynamically created by the application.</p>