Is it possible to showcase text from a text file formatted in HTML?

Is there a way to showcase the content and HTML tags from content.txt as traditional HTML on a web page?

Answer №1

To start, you need to establish the file content.txt and input your desired HTML source code into it. For instance:
content.txt

Indeed, this is what's inside content.txt!
Any HTML included?
<code>Here lies the code tag</code>
<button class="btn btn-primary" onclick="hideAjax()">Conceal content.txt</button>
<h1>Success!</h1>

HTML

<div id="ajaxResponse">
    No display of content.txt here
</div>
    <button type="button" onclick="loadAjax()" class="btn btn-primary">Reveal text from content.txt</button>

JS/Ajax

 function loadAjax() {
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
       document.getElementById("ajaxResponse").innerHTML =
       this.responseText;
     }
   };
   xhttp.open("GET", "content.txt", true);
   xhttp.send();
 }

Note: This was discovered on testingc.ga, so make sure to explore their own take on it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize AJAX to verify the content of a PHP variable within a Wordpress environment

After attempting multiple approaches without success, I am seeking advice from anyone who has experience with this particular issue. I have developed a custom post type that generates Public pages. However, I require certain information to only be accessi ...

What is the process for configuring the zoom control feature?

When utilizing react-google-maps, I am encountering issues with changing the zoom position as per the following code snippet: <GoogleMap defaultZoom={5} defaultCenter={{ lat: 22.845625996700075, lng: 78.9629 }} options={{ gestureHandling:'greedy ...

The $.getJSON onComplete function does not pause for the result to be returned

When working with JSON data and calling the loadThumbs(json) event, an error message stating that json is undefined may occur. Upon printing the JSON object to the console, it appears empty. However, if the JSON object is manually printed, it displays co ...

Confusion with Javascript callbacks - seeking clarity

I am having difficulty grasping the concept of callback functions. I know that they are functions passed as parameters to other functions. My assumption was that when a function is passed as a parameter, it would be recognized as a callback function and ex ...

How can I save files to the ~/Documents directory using Node.js on my Mac computer?

Trying to work with the user's Documents folder in Node.js on macOS: var logger = fs.createWriteStream('~/Documents/somefolderwhichexists/'+title+'.txt'); Encountering an error without clear cause. Error message received: Unca ...

Karma jasmine and an angular controller that utilizes the 'Controller as' syntax (where 'this' is used instead of $scope)

I'm having trouble setting up karma for my unit tests, specifically on a basic example: Here is the controller file: angular.module('balrogApp.requests', [ /* Dependencies */ ]) // Routes configuration .config(['$routeProvider&a ...

Searching for mobile WiFi preferences through a web browserHere are the steps to

Is there a method to access mobile connectivity settings through a website? I am interested in determining the connection type (3G\4G\WiFi) and if it is WiFi, identifying the security method being used. Is this achievable? If so, how? Edit: If ...

transfer data from local array to global variable

Need help with returning array values using console.log(array);, currently it's displaying empty value []. Any tips or suggestions would be greatly appreciated. var array = []; var maxLength = 3; var delay = 250; //Shortened the delay var ticker = {}; ...

Comparing Django Templating with AJAX for loading a small div on a web page

My Django server is set up to load a webpage that contains mostly static content, but a few numbers need to be fetched from the database. I am considering the trade-offs between performance and price. One option is to host my Django server on a high-speed ...

Google Sheets displaying blank values after submission via an AJAX call

I have been working on transferring data from my web app to a Google spreadsheet and I am encountering some issues. I followed the script provided by Martin Hawksey, which can be found here: https://gist.github.com/mhawksey/1276293 Despite setting everyth ...

Having trouble setting up the next-auth login page and experiencing issues with the getProviders() function

Greetings to all fellow web developers, I am currently working on a Next.js application that utilizes next-auth for user authentication. I have set up the [...nextauth].js file in the "pages/api/auth" directory and a signin.js file in the "pages/auth/" di ...

Extract from Document File

After receiving a PDF through an Angular Http request from an external API with Content Type: application/pdf, I need to convert it into a Blob object. However, the conventional methods like let blobFile = new Blob(result) or let blobFile = new Blob([resul ...

The RSS XML feed causes jQuery Ajax to throw an error in Internet Explorer 9

On my ASPX page, I generate RSS XML in the following format: <?xml version="1.0" encoding="utf-8"?> <rss version="2.0"> <channel> <title>Article Feed</title> <link>http://www.example.com/articles</link> ...

The characteristics and functions of the THREE.TransformControls

I've been attempting to utilize transformControl in my program, but due to the lack of documentation on controls at threejs.org, I find it challenging to tap into its full potential. I'm seeking information on all the properties and methods provi ...

What is the best way to apply a unique style to the currently active tab in a sidenav based on

I am in the process of creating a side navigation bar where I want to incorporate a left border on the active tab. How can I achieve this by utilizing state and passing a boolean value as a prop to the Child SideNavItem class, then updating it with each ta ...

Can anyone recommend a reliable JavaScript library for creating resizable elements?

I am looking to incorporate resizable functionality for a textarea. While I have experimented with jQuery UI's "resizable" feature, it doesn't quite meet my needs. I appreciate jQuery, but the resizable option falls short in allowing me to resize ...

Update JSON values using JavaScript or jQuery

In the code snippet provided, there is an issue where nameElem.data('index') does not change, causing it to always display element 1 in the list. I attempted to change the json value with cardInfo[i].data.index = index;, but that did not solve th ...

Creating real-time updates in Vuex and components using their data

There are two distinct elements here - a button and a form. By clicking the button, I can trigger an action in Vuex using "$store.dispatch". addWorkerSubmit: async function () { ... await this.$store.dispatch('workermanage/addWorkerSubmit ...

Fixing a compilation error when attempting to paste text into a file with Selenium Webdriver

I am new to using Selenium webdrivers and encountering a compilation error with the code below. Can anyone provide some assistance? My goal is to save a message into a file rather than displaying it on the console. testResultFile="C:\&b ...

Having issues executing a conditional check using ng-if in AngularJS

I am attempting to verify a condition and here is how it appears: <ons-list-item ng-repeat="EventList in EventLists" ng-if="EventList.start.dateTime | DateMonth == TodayDetail"> I am encountering difficulties with this ng-if="EventList.start.dateTi ...