Loading URLs via a case statement
function loadDoc(UrlString) {
  var xhttp = new XMLHttpRequest();


First, I'd suggest replacing that XHR code with the newer fetch. There's a polyfill for it for older browsers. fetch returns Promises, which should be analogous to monads if I'm not mistaken.

xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 &amp;&amp; xhttp.status == 200) {
    document.getElementById("storybox").innerHTML = xhttp.responseText;
  }
};


Next would be to pull in the functionality that updates HTML to the caller instead of pushing it out to your AJAX operation. One big problem with your approach is that you're pushing out functionality all over the place. This becomes maintenance headache as the logic is all over the place. Should I want to change storybox to something else, I would have to trace all the way to loadDoc.

For that big switch statement, use an object as a map instead. Have it hold the url values. When a key doesn't exist, it should return undefined which you can easily default using || and a right-hand-side value.

In the end, your code can be as simple as:

var defaultUrl = 'templates/story/pt1/Start.html';

var urls = {
  YesStart: 'templates/story/pt1/YesStart.html',
  Sleep: 'templates/story/pt1/Sleep.html',
  Swindon: 'templates/story/pt1/Swindon.html'
};

function buttonClicked(buttonid){
  fetch(urls[buttonid] || defaultUrl).then(function(response) {
    return response.text()
  }).then(function(body) {
    document.getElementById("storybox").innerHTML = body
  })
}