I have tried different approaches to read a text file from the local file system in JavaScript and display the content of the file in alert() but all to no avail.

Approach 1

function readTextFile(file) {
          var rawFile = new XMLHttpRequest();
           rawFile.open("GET", file , false);

          rawFile.onreadystatechange = function () {
              if (rawFile.readyState === 4) {
                  if (rawFile.status === 200 || rawFile.status == 0) {
                      var allText = rawFile.response;
                     document.getElementById("content").innerText = allText;
                      alert(allText);
                  }
              } else {
                  alert("Can't read the file");
              }
          }
          rawFile.send(null);
    }
    readTextFile("FormulaQuestion.txt");

The FormulaQuestion.txt file is in the same directory with the html file, this approach shows an empty alert window on the browser

Approach 2 using fetch method

fetch('FormulaQuestion.txt')
        .then(response => response.text())
        .then((data) => {
            alert(data);
        })

This doesn't show anything

Approach 3 using JQuery

$.get('FormulaQuestion.txt', function (data) {
        alert(data)
    }, 'text');

This doesn't work either.

I am building a desktop application that uses a web browser control to load html file which is embedded into the application. The application reads the string from sqlite database and save it in the FormulaQuestion.txt file, then refreshes the WebControl component which reloads the html file. Now when the html file is reloaded, the JavaScript should read the text file and display it on alert() which once the alert is able to display the file content, i will then set it to a paragraph and remove the alert(). Please someone should help me out.