Trying to create a button that will change the font family

I am working on an assignment that requires buttons. Am looking to create a button that changes fonts at random from a list. I have a button that doesn't work and a list that does. Any recommendations?

<p id="sentance">Lets try changing the font!</p>

<select onchange="myFunction(this);" size="13">
  <option>Georgia</option>
  <option>Palatino Linotype</option>
  <option>Book Antiqua</option>
  <option>Times New Roman</option>
  <option>Arial</option>
  <option>Helvetica</option>
  <option>Arial Black</option>
  <option>Impact</option>
  <option>Lucida Sans Unicode</option>
  <option>Tahoma</option>
  <option>Verdana</option>
  <option>Courier New</option>
  <option>Lucida Console</option>
</select>

<script>
function myFunction(selectTag) {
  var listValue = selectTag.options[selectTag.selectedIndex].text;
  document.getElementById("sentance").style.fontFamily = listValue;
}
</script>

<button id='FontFamily'>Change Style!</button>

<script>
    document.getElementById('FontFamily').onclick = changeFontFamily;
    var currentFontFamily = "Monaco" 

    function changeFontFamily() {
        if (currentFontFamily == "Monaco") {
            document.body.style.fontFamily = "Times New Roman";
            currentFontFamily = "Times New Roman"
        } else {
            document.body.style.fontFamily = "Monaco";
            currentFontFamily = "Monaco"
        }
        return currentFontFamily
    }

    }
</script>