0

I have my HTML file, I have my javascript file, I have my .txt files with plain text that I would like to display on my HTML file in the browser.

const fs = require("fs");
let fileUrl = "content";
let files = fs.readdirSync(fileUrl);

function kys(){
    let result = "";
for (i in files){
    result += fs.readFileSync("content/" + files[i]).toString();
}
return result;
}

This file reads the text file from the "content" folder.

<script src="../scripts/skripti.js"></script>

I've added the javascript file inside my body tag in my HTML file, but I can not for the life of me figure out how to have it display the "result" value that is returned from the function.

Simplest way could be by creating a separate javascript file or adding to that javascript file code that creates a new HTML tag and edits the InnerHTML element, but I get errors that "document" is not defined.

This is probably due to me testing the website through node.js through a VSC extension? I've also tried just opening the HTML file in my browser (Chrome) and no difference.

I've also tried trying to get the function to return the result to a variable, but I run to the error of "document" and "window" not being defined.

Looking through the internet the only solution seems to install npms but I would like to keep this as simple as possible and just latching modules seems like unnecessary bloat.

Creating a script tag and trying to call the function from inside my HTML file doesn't seem to work.

Tl;dr, I have text in file, I want text in web page using javascript, text file is stored locally (on my computer).

Tuomas
  • 1
  • 1
  • The JS looks like node.js, which needs to runs on the server. But a ` – Barmar Jan 13 '21 at 21:09
  • Is there a way to just not use node.js then? I'm not an experienced developer but I'd like to keep it as clean as possible for my first attempt at a website? Wasn't aware I was writing node.js in the first place lol. – Tuomas Jan 13 '21 at 21:17
  • Are you trying to read a file on the server or client? – Barmar Jan 13 '21 at 21:20
  • The text file and HTML file are both locally stored, so assuming clientside. – Tuomas Jan 13 '21 at 21:32

1 Answers1

0

The fs package is specific to Node.JS and can't be used in a web page. You can replace readFileSync with XMLHttpRequest or fetch(), but there is no browser-compatible replacement for readdirSync. For that, you will need to use either an index file (essentially a file that contains a list of other files to download) or a server API that gives you a list of directory contents.

acomputerdog
  • 194
  • 1
  • 8
  • That got my gears running once again, thank you! So would it be best for me to re-think this whole thing through and start over since I haven't yet made much progress? My goal is to make just a simple blog-esque website without using any boilerplate solutions to learn the ropes. I have hobby experience in C/C++ and general coding but web development seems to get really complicated once you look beneath the surface. – Tuomas Jan 13 '21 at 21:25
  • @Tuomas I would say so. For web applications, you need to think in two parts - the client, and the server. The client should act as an interface to the user (displaying data and accepting inputs) and the server should provide structured and controlled access to the site's data. – acomputerdog Jan 13 '21 at 21:33