site/main.js

// I suck at JS okay, don't judge. I know this is horrendous. Heavy copy/paste junk.
// Code is commented more than it needs to be because I'm still learning and the comments are basically post-it notes to help me remember.
// Ajax is entirely pointless for this site, but I did it to learn.

// Find all our buttons
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');

// Make the base URL a variable because it's easier if I ever move the site
const baseUrl = "https://quad.moe/test/";

// Create variables that will get populated by loadContent() later
var payload1;
var payload2;
var payload3;

// Very bad function to get rid of the "active" class wherever it is atm
function resetButtons() {
  button1.className = "nav-button";
  button2.className = "nav-button";
  button3.className = "nav-button";
}

// Fetch all the page contents
async function loadContent(baseUrl) {
  const http1 = fetch("pages/about.html");
  const http2 = fetch("pages/about.html");
  const http3 = fetch("pages/about.html");

  const requests = [http1, http2, http3];

  const responses = await Promise.all(requests);

  return responses;
}

function setContent(navbutt, payload) {
  document.getElementById("page").innerHTML = payload;
  resetButtons();
  navbutt.className += " active";
}

function initialContent() { 

  // Get the HTML we need

  // This returns Response { type: "basic", url: "https://example.com", redirected: false... etc.
  loadContent().then((res) => {console.log(res);});

  // This returns a Promise object with <state>: "pending"
  loadContent().then((res) => {console.log(res[0].text());});

  contents = loadContent();
  // Can't figure out how to make sure that each web request in loadContent()
  // has returned proper HTML before it actually proceeds executing the rest of this funciton

  // Then store the text only for later use
  payload1 = contents[0].text();
  payload2 = contents[1].text();
  payload3 = contents[2].text();

  console.log(payload1);

  // Slap on all the event listeners
  button1.addEventListener('click', function() { 
    setContent(button1, payload1);
  }, false);
    button2.addEventListener('click', function() { 
    setContent(button2, payload2);
  }, false);
    button3.addEventListener('click', function() { 
    setContent(button3, payload3);
  }, false);

  // And finally enable the first tab
  setContent(button1, payload1);
}