I have been around this problem for several hours now. My objective is to load the contents of ONE remote text file and display it INSIDE HTML with styles (so "embed" is not a solution as I soon discover). I tried several pieces of code and did more than 100 tests. I manage to solve all problems except one. Even though I can get the content of the file, and even print it in the console, I cannot store this in a variable that I can embed in HTML body code. Below is where I got so far. Thanks for your help.
const url = 'https://12Me21.github.io/test.txt';
function asynchronousCall(callback) {
const request = new XMLHttpRequest();
request.open('GET', url);
request.send();
request.onload = function() {
if (request.readyState === request.DONE) {
console.log('The request is done. Now calling back.');
callback(request.responseText);
}
}
}
asynchronousCall(function(result) {
console.log('This is the start of the callback function. Result:');
console.log(result);
console.log('The callback function finishes on this line. THE END!');
});
console.log('LAST in the code, but executed FIRST!');<body>
<h1>the content of the file is:
<script type="text/javascript">
document.write(result)
</script>
</h1>
</body>You can create an html element with id and then access it by document.getElementById() and set innerText property.
<script>
const url = 'https://12Me21.github.io/test.txt';
function asynchronousCall(callback) {
const request = new XMLHttpRequest();
request.open('GET', url);
request.send();
request.onload = function() {
if (request.readyState === request.DONE) {
console.log('The request is done. Now calling back.');
callback(request.responseText);
}
}
}
asynchronousCall(function(result) {
console.log('This is the start of the callback function. Result:');
console.log(result);
document.getElementById('content').innerText = result;
console.log('The callback function finishes on this line. THE END!');
});
console.log('LAST in the code, but executed FIRST!');
</script>
<body>
<h1>the content of the file is:
<div id="content"></div>
</h1>
</body>
You can simplify the process a bit by using fetch (which is built in to Javascript), and adding the contents of your file into an element on your page:
const url = 'https://12Me21.github.io/test.txt';
let fileContents = document.getElementById('file-contents');
fetch(url)
.then(response => response.text())
.then(data => {
fileContents.innerText = data;
});<body>
<h1>the content of the file is:</h1>
<span id="file-contents"></span>
</body>