Display text from local text file into a div? (No webserver)

Question

I am a Twitch streamer and I am currently trying to animate any text on my stream the way I want it animated. I use a thing called stream labels, which gets the latest information from my stream, and outputs it to a folder on my pc as a .txt file.

What I am trying to do is to call upon the .txt file in a div, style it, and use the file by using OBS browsersource. I have it animated and it does display the text, but cant figure out a way to style it (the content within the object). I am terrible with JS, and I have read that you cannot call upon local files with JS. Is there anything that I could use to make this happen?

This is what I have:

 <head>

    <link rel="stylesheet" href="style.css">

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>



<body>





<div id="element-animation">

</div>





<script>

document.getElementById('element-animation').innerHTML += '<object type="text/html" data="most_recent_follower.txt"></object>';

</script>



<script>

</script>





</body>

The problem is, using this way would be no different then just using the object tag in the html, and the object content cannot be styled.

Answer 1

You need to learn the basic of javascript... Specially about AJAX.

To get everything from a file into your document you need to use ajax - to use ajax you probably need a server unless some security flags is turned off.

jQuery(function($){
  $.get("most_recent_follower.txt", function(txt) {
    $('#element-animation').text(txt)
  })
})

Display text from local text file into a div? (No webserver)

Sign up