title: Button working on chrome but not on firefox
body: <p>I made a button in HTML that work fine on Google Chrome but does not react at all on Firefox. </p>
  
  <p><strong>My code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function fbs_click() {
    var u = location.href;
    var t = document.title;
    window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&amp;t=' + encodeURIComponent(t) + '&amp;s=' + encodeURIComponent(CQuote + CAuthor), 'sharer', 'toolbar=0,status=0,width=626,height=436');
  }
  
  
  function rSign() {
    var test = Math.random();
    return test &gt; 0.5 ? 1 : -1;
  }
  var CQuote = "",
    CAuthor = "";
  
  function getQuote() {
    $.ajax({
      jsonp: "jsonp",
      dataType: "jsonp",
      contentType: "application/jsonp",
      url: "https://api.forismatic.com/api/1.0/?",
      data: {
        method: "getQuote",
        lang: "en",
        format: "jsonp",
      },
      success: function(quote) {
        //  document.getElementById("quote").innerHTML =  
        CQuote = quote.quoteText;
        // document.getElementById("author").innerHTML = 
        CAuthor = quote.quoteAuthor;
        document.getElementById("author").innerHTML = CAuthor;
        document.getElementById("quote").innerHTML = CQuote;
      }
  
    });
  }
  
  
  $(document).ready(function() {
    getQuote();
  })
  
  
  var background = document.getElementById('backimg');
  var huetarget = 0;
  var huecurrent = 0;
  var bright = 1;
  
  function abyssmal() {
    background.style.filter = 'hue-rotate(' + huecurrent + 'deg) ';
    if (huecurrent &lt; huetarget) {
      huecurrent += Math.abs(huetarget - huecurrent) / 20
    }
    if (huecurrent &gt;= huetarget) {
      huecurrent -= Math.abs(huetarget - huecurrent) / 20
    }
  }
  var interval = setInterval(abyssmal, 25);
  
  $("#btnAnimate").on("click", function() {
    huetarget += (Math.random() * 50 + 50) * rSign();
    getQuote();
  });
  
  $('#tweet').on("click", function() {
    window.open("https://twitter.com/intent/tweet?hashtags=quotes&amp;related=freecodecamp&amp;text=" + encodeURIComponent('"' + CQuote + '"   -' + CAuthor), "_blank")
  });
  
  $('#facebook').on("click", function() {
    fbs_click();
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*#myDiv{
    background-color: green;
    transition : background-color 2s,opacity 2s;
      
  }
  
  #myDiv:hover{
      background-color : red;
    opacity : 0.5
    
  } */
  
  #quotebox {
    font-size: 30px;
    height: auto;
  }
  
  #authorbox {
    text-align: right;
  }
  
  .box {
    height: auto;
    margin: auto;
  }
  
  #btnAnimate {
    width: 150px;
  }
  
  .share {
    width: 50px;
    float: right;
  }
  
  .button {
    height: 50px;
    padding: 0px;
    vertical-align: middle;
    margin-top: 40px;
    color: white;
    background-color: #333c5b;
    border-radius: 3px;
    border: none;
  }
  
  button:hover {
    opacity: .8;
  }
  
  .background-tile {
    background-image: url(https://image.noelshack.com/fichiers/2017/51/3/1513771628-background-1.jpg);
    background-size: 1500px 900px;
    height: 900px;
    width: 1515px;
    padding-top: 270px;
    z-index: -1;
  }
  
  #backimg {
    filter: hue-rotate(0deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
  
  &lt;div class="background-tile" id="backimg"&gt;
    &lt;div class="box" id="myDiv" style="padding : 50px 50px 10px 50px;width : 45%;border-radius: 5px; background-color : #476870"&gt;
      &lt;div id="quotebox"&gt;
        &lt;i class="fa fa-quote-left" style="font-size:40px;margin-left : 8px "&gt;&lt;/i&gt;
        &lt;span id="quote"&gt;&lt;/span&gt;
        &lt;p id=a uthorbox&gt;-&lt;span id="author"&gt;&lt;/span&gt;
          &lt;p&gt;
      &lt;/div&gt;
  
      &lt;button class="button quotebutton" id="btnAnimate"&gt;get quote&lt;/button&gt;
      &lt;button class=" share button fa fa-facebook" id="facebook"&gt;&lt;/button&gt;
      &lt;button class=" share button fa fa-twitter" id="tweet" style="  margin-right: 25px;"&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I doublechecked that only phrasing elements were nested inside the button.</p>
  
  <p><strong>Question:</strong> Why does the button not react on Firefox.</p>