Change source file in a script?

Change source file in a script?

I have an audio element with a playlist. When I click on one of the songs it takes the filename and displays it in a div with the id of nowplaying. EG.
  1. $("#nowplaying").html("<p>" + $("#myaudio").attr("src").split("\/").pop().trim() + "</p>");
This is working fine.

Now I am trying to load in a text file of the lyrics for each song. I have this script that loads a text file into the html in a pre element:

  1.   var x;
    { x = new XMLHttpRequest(); }

      function getdata() {
        x.open("get", "06 - All The People.txt", true);
        x.onreadystatechange= showdata;
        x.send(null);
      }

      function showdata() {
        if(x.readyState==4) {
          var el = document.getElementById('pre');
          el.innerHTML = x.responseText;
        }
      }

    getdata();showdata();
This part also works fine, but when I click on a file I need to change the source in the script EG.
  1. x.open("get", "06 - All The People.txt", true);
So I need to change the 06 - All The People.txt part each time a song is clicked.
I can get the path to change and display in a div on the page with:
  1. $("#filesrc").text("" + $("#nowplaying p").text().replace(".mp3", ".txt") + "");
This will take the file name from nowplaying and change the file extension from mp3 to txt, I can't work out how to use it to change the source file in the script above when a new song is clicked.

Any help would be very appreciated.