I want to put a text file into a javascript function and then somehow display that function in the html.
The javascript can't be inside the html file; it has to be referenced from outside the file like a:
Here is a picture of what I am trying to do (I don't have enough rep points):
https://i.ibb.co/xGxw1bm/1.png
I have tried:
- I tried using "XMLHttpRequest" to try and display the text file in the front end html by uploading my text file to dropbox so I can be using the "https" method to communicated instead of "file://" since that doesn't work in the twitch developer rig
const Http = new XMLHttpRequest();
const url=' https://cors-anywhere.herokuapp.com/https://app.box.com/s/zkt7pbsv0cnnogafcxq8n5elmc9plxbz';
\\later in the code; because I didn't know where to put the rest of the http commands so I put them in the twitch.onAuthorized function which needs to be ran in this script anyway. I don't know what it does but it needs to be there and since its already a function I figured it would be better there. (Unless someone can make a function where all the https stuff is in one function.)
twitch.onAuthorized(function (auth) {
// save our credentials
token = auth.token;
tuid = auth.userId;
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText);
setAuth(token);
$.ajax(requests.get)
}
});
- I tried the document.getelement thingy but that doesn't ever explain to me how to put this in the html as text: document.getElementById("demo").innerHTML
Everything I have seen on this has always said you can manipulate using a tag but I have not seen one example where this document.get thingy is in another javascript file and they have to reference it to the html. I always see it in the same file with the html.
What function can I use to extract that function into the html file without using a button? I just want it to display on like an object tag or an iframe tag.
- I tried using the object tag.... It seems to work however...... I notice it pulls the website like an html file. Is there anyway to direct link a text file to the object tag but just the text data shows? Do I have to upload my text to a secure https? Can I even pull a text file from the web without it pulling in the html?
Here is the html file exact: (Note: This is testing, so none of the words matter in the html file. I am just trying to learn how to put text on here from another javascript file or backend.js javascript file. What tag or reference can I use to put a function from javascript into here without a button? Just on the screen I need the text.:
<!DOCTYPE html>
<html>
<head>
<title>Viewer Page</title>
</head>
<body style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">
<div id="app" class="full-height"></div>
<script src="twitch-ext.min.js"></script>
<script src="jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="viewer.js" type="text/javascript"></script>
<h2>Hello, World!</h2>
<p>Would you care to cycle a color?</p>
<object type="text/html" data="https://www.w3.org/TR/PNG/iso_8859-1.txt"></object>
</body>
</html>
Here is the viwer.js (this is where the javascript for getting the text file needs to be):
const Http = new XMLHttpRequest();
const url=' https://cors-anywhere.herokuapp.com/https://app.box.com/s/zkt7pbsv0cnnogafcxq8n5elmc9plxbz';
let token = '';
let tuid = '';
const twitch = window.Twitch.ext;
// create the request options for our Twitch API calls
const requests = {
set: createRequest('POST', 'output'),
};
function createRequest (type, method) {
return {
type: type,
url: location.protocol + '//localhost:8081/musicoutput/' + method,
success: updateBlock,
error: logError
};
}
function setAuth (token) {
Object.keys(requests).forEach((req) => {
twitch.rig.log('Setting auth headers');
requests[req].headers = { 'Authorization': 'Bearer ' + token };
});
}
twitch.onContext(function (context) {
twitch.rig.log(context);
});
twitch.onAuthorized(function (auth) {
// save our credentials
token = auth.token;
tuid = auth.userId;
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText);
setAuth(token);
$.ajax(requests.get)
}
});
function updateBlock (hex) {
twitch.rig.log('Updating music info');
}
function logError(_, error, status) {
twitch.rig.log('EBS request returned '+status+' ('+error+')');
}
function logSuccess(hex, status) {
twitch.rig.log('EBS request returned '+hex+' ('+status+')');
}