How to change elements inner html?


<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<script>
  var quotes = ["don't hesistate!",
              "think preemptively",
              "Bob Saget is supreme",
              "bifurcation is the key" ];
  $("document").ready( function() {
    //$("#quote-field").html = "DICK";
    $("#new-quote").on("click", function() {
      //console.log("test");
      var rand = Math.floor(Math.random() * quotes.length);
      //$(".quote-text").html = quotes[rand];
      console.log(quotes[rand]);
      document.getElementById("qt").innerHtml = quotes[rand];   });
  });

</script>
<div class="quote-box">
<div id = "qt" class="quote-text">
 text
</div>
  <div class="buttons">
    <button class="button" id="new-quote">gen</button
  </div>
</div>

<div class="footer">  <a href="http://codepen.io/gabriel-reyes" target="_blank">mai profile</a></div>
</body>

the problem is that neither jquery or standalone javascript is functioning as it pertains to changing the specified elements text, as such i cannot complete the project

First, check your browser’s console for errors. Then, try moving the script tag below the rest of your markup.

Maybe not enough ’
Here… document.getElementById(“qt”).innerHtml = ‘quotes[rand]’