I'm feeling a bit lost on where to go next with this JavaScript

Question

I'm feeling a bit lost on where to go next with this JavaScript

I've been working on a project in Python where I need to retrieve a file, store it in an array, and display a random string from the array on HTML. However, I have no experience with JavaScript and am unsure how to proceed. I suspect there may be an issue with assigning the file to the array, which is causing confusion.

<!doctype html>
<html>
<head>
<title>Julia Mount</title>
</head>
<body onload="ll()">
<style>
    body{
    background-color:lime;  
}
#wat{
    padding-top:auto;
    margin: auto;
    text-align:center;
}
</style>

<script type="text/javascript">
    var fs = require("fs");
    var text = fs.readFileSync("./mytext.txt");
    var textByLine = text.split("\n")
    var ll = ["wat","idk"   
];
               //stuff im trying
    //var randomIndex = Math.floor(Math.random() * textArray.length); 
    //var randomElement = textArray[randomIndex];
    //document.getElementById("ll").innerHTML = randomElement;
    ll.toString();
    //document.getElementById("ll").innerHTML = ll;

</script>
<h1 id="wat">I love </h1>
    <p></p>
    <script type="text/javascript">
        document.write($ll)     
      </script>
</body>
</html>

javascript html css

Answer 1

Answer №1

Just like mentioned in another response, if you want to retrieve a text file in the browser using server-side code (such as Node.js), you'll need to perform an AJAX request with XMLHttpRequest on the client side. This involves wrapping the request in a function and returning a Promise to ensure synchronous execution.

To achieve this, replace the following lines:

var fs = require("fs");
var text = fs.readFileSync("./mytext.txt");
var textByLine = text.split("\n");

with :

var textByLine;

function readTextFile(file, cb) {
  return new Promise((resolve, reject) => {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4) {
        if (rawFile.status === 200 || rawFile.status == 0) {
          resolve(rawFile.responseText);
        }
      }
    }

    rawFile.send(null);
  });

}

readTextFile('mytext.txt').then((text) => {
  textByLine = text.split("\n");
});

// ... rest of your code ...

Answer 2

Just like mentioned in another response, if you want to retrieve a text file in the browser using server-side code (such as Node.js), you'll need to perform an AJAX request with XMLHttpRequest on the client side. This involves wrapping the request in a function and returning a Promise to ensure synchronous execution.

To achieve this, replace the following lines:

var fs = require("fs");
var text = fs.readFileSync("./mytext.txt");
var textByLine = text.split("\n");

with :

var textByLine;

function readTextFile(file, cb) {
  return new Promise((resolve, reject) => {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function() {
      if (rawFile.readyState === 4) {
        if (rawFile.status === 200 || rawFile.status == 0) {
          resolve(rawFile.responseText);
        }
      }
    }

    rawFile.send(null);
  });

}

readTextFile('mytext.txt').then((text) => {
  textByLine = text.split("\n");
});

// ... rest of your code ...

Answer 3

Answer №2

JavaScript does not have built-in capabilities for file access. It relies on functions that are provided by the specific hosting environment.

var fs = require("fs");
var text = fs.readFileSync("./mytext.txt");

These particular functions are available in Node.js, but they are not accessible in web browsers.

To execute this code, it should be separated from the HTML document and run using Node.js.

For guidance on reading files in JavaScript embedded within a webpage, refer to this question.

Answer 4

JavaScript does not have built-in capabilities for file access. It relies on functions that are provided by the specific hosting environment.

var fs = require("fs");
var text = fs.readFileSync("./mytext.txt");

These particular functions are available in Node.js, but they are not accessible in web browsers.

To execute this code, it should be separated from the HTML document and run using Node.js.

For guidance on reading files in JavaScript embedded within a webpage, refer to this question.

I'm feeling a bit lost on where to go next with this JavaScript

Answer №1

Answer №2

Similar questions

Adjust the appearance of an element that is being inserted using .before() by utilizing a variable

Displaying search results from a PHP query in an HTML text box

Vue Websockets twofold

What could be causing the state object in React to not be updating correctly? There seems to be a discrepancy between the expanded and

Is it possible to trigger the alert message by utilizing this code snippet?

A guide on transferring documents between collections using Mongoose and MongoDB

An efficient way to store a JavaScript-generated countdown timer in MySQL using PHP

Is there a way to execute a javascript function that is located outside of my Angular application without having to import it?

I am retrieving data from a service and passing it to a component using Angular and receiving '[object Object]'

Retrieve the status of the webpage using the "document.readyState" command within the JMeter WebDriver Sampler with JavaScript

Exploring the techniques for displaying and concealing div elements with pure JavaScript

How come the last word in CSS nested flexbox wraps even though there is space available?

Can Bootstrap buttons be manipulated to mimic checkbox behavior effectively?

Uploading a three.js canvas to the server without saving it as a file

The AngularJS directive "ng-include" is used to dynamically

Acquiring the item by referencing one of its property's values

Is there a way to locate classes containing underscores within them using Selenium?

The click interactions of SVG elements are altered when switching between <img> and <object> elements

Determine the number of days without including weekends and holidays using JavaScript

React: The received value for the prop type must be a function, but it was an object