Website that pulls data from a text file on every reload, not pulling data

I am trying to build a to-do list that I can display on my office TV that reloads every minute, I will be emailing a service account and creating code for it to add/remove tasks at a later date. I’m currently just trying to get the site to pull the tasks from a text file and update the site, but it is not pulling the data. I feel like I may have something wrong here, if anyone can help it would be much appreciated.

Both the index.html and todo.txt files are in the same directory.

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  <script type="text/javascript">
    function refresh() {
      var req = new XMLHttpRequest();
      console.log("Grabbing Value");
      req.onreadystatechange = function () {
        if (req.readyState == 4 && req.status == 200) {
          document.getElementById('ToDo').innerText = req.responseText;
        }
      }
      req.open("GET", 'ToDo.txt', true);
      req.send(null);
    }

    function init() {
      refresh()
      var int = self.setInterval(function () {
        refresh()
      }, 10000);
    }
  </script>
</head>

<body onload="init()">
  <div id="main">
    <div id="updateMe">
      <h2>To-Do List</h2>
      <h1 id="ToDo"></h1>
    </div>
  </div>
</body>
</html>

ToDo.txt contents

Purchase Things