Using js to create 'page parts' for a website

Question

So, I'm learning JavaScript and wanted to take what I learn and create a personal website to test. I like using themes because it keeps my interest, I based my website off the terminal computers from the Fallout universe (the video game).

In Short: What I would like to know is how to "call" the js file into the html page. I want to be able to show the js code in the html page. I'm not too worried about if my js code is correct as far as the js files. I'm still training in that. I'm just very confused no how to display my html code I wrote in a javascript document for the purpose of displaying in every html page I write. I hope that makes sense lol. I like organization and going to one place to change something if needed. In my head, this would be possible to do with html + javascript.

Here is basically how I'd like it to work (at least in my head lol):

FILES

RobCo (Files root path):

index.html

aboutUs.html

styles.css

pageParts (Robco/pageParts) file path:

SiteHeading.js

SiteFooter.js

I would like to go into index.html and have the code/information display from SiteHeading.js to display.

I'm currently learning about js, particularly about using html tags and what not so I dont need info on that.

What I would like to know is how to "call" the js file into the html page.

I thought something like this would work but has not, <script>document.write(robcoSiteHeading.js)</script>

For testing purposes I moved robcoSiteHeading into the RobCo folder so all files are in the same folder. Just to make sure the code is right rather than a file pathing issue. Still no joy.

Here are some examples of my code:

index.html

<!DOCTYPE html>
<!-- RobCo Home Page when the site is loaded initially -->
<html>
<head>
<title>RobCo Terminal Home</title>
<link rel="stylesheet" href="styles.css">

</head>
<body>

  <!-- Terminal Header; used as the terminal's Header or first text. [InsertPageHeadingHere]-->
  <script>document.write(robcoSiteHeading.js)</script>



<!-- Main Text -->
  <p>STATUS: Unit(s) Active
  <br/>
  CONNECTED: 1 Unit(s) Connected to this terminal.
  <br/><br/>
  Please choose an option:
  <br/>

  <!-- Clickable Options -->
  <p>
  <a href="login.html">[Login]</a>
  <br/>
  <a href="DefenseProtocol.html">[Engage Defense Protocal]</a>
  <br/>
  <a href="SelfDestruct.html">[Initiate Self Destruct]</a>
  <br/>
  <a href="aboutUs.html">[About Us]</a>
  </p>

</body>

robcoSiteHeading.js testing section, If That works I can figure out the rest of the js code during my training.

// Terminal Header; used as the terminal's Header or first text on nearly every page.

let siteHeading;
let testing;

// //siteHeading = `
//   <p>
//   ==================================================
//   </p>
//   <p>Welcome to ROBCO Industries (TM) Termlink</p>
//   <p>USAF Terminal Controler v0.01 </p>
//   <p>
//   ==================================================
//   </p>
//   <p>
//   This interface should be used by RobCo-licensed technicians only. The client
//    must only be operated by official personal of USAF or by pre-approved clients.
//   <br/><br/>
//   </p>
// `;

testing = '
  <p> ================================================== </p>

  <p> USAF Terminal Controler v0.01 </p>
';

Answer 1

You need to link your javascript file to the html page. The write method has no idea what robcoSiteHeading.js is.

<script src="robcoSiteHeading.js"></script>

Place it before the </body> closing tag. Now, in your robcoSiteHeading.js file, you can create a function that writes html to the page. You can now in your body tag use the onload event, eg

Once the page is loaded, it will run the function inside your javascript file.

 <.DOCTYPE html> <html> <body onload="myFunction()"> <script> function myFunction() { document.write("<h1>Hello World!</h1><p>Have a nice day!</p>") } </script> </body>

Answer 2

If I am right, I think you want to embed your HTML you have written in your JavaScript file in your HTML page.

If that is the case, you can do this:

Include your js files

<script src="your-js-file-name.js"></script>

Create a container which gets the JavaScript's content in your HTML page

<div id="js-content"></div>

In your JavaScript file:

const container = document. querySelector("#js-content"); container.innerHTML = testing //the content you want to embed.

I hope this is what you want..

Using js to create 'page parts' for a website

Question

2 answers

solution1
0 2020-04-23 02:17:14

solution2
0 2020-04-23 02:24:47

Using js to create 'page parts' for a website

Question

2 answers

solution1 0 2020-04-23 02:17:14

solution2 0 2020-04-23 02:24:47

solution1
0 2020-04-23 02:17:14

solution2
0 2020-04-23 02:24:47