How should I go about regenerating template literals? Is this an improper way to go about things?

Question

Good evening!

I know related questions have been asked before, but after several hours of trying today, I figured I'd make my specifics clear in order to get some help, as lurking these forums has been the best help in learning JS so far.

Is there any way to have template literals update themselves when a variable within them changes? Is there a better way to go about doing all of this?

Below is an example made from my original code:

HTML:

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sidePage">
        <div class="sNav">
            <ul class="sOptions">
                <li><a id="p01btn" onclick="p01Op()">overview</a></li>
                <li><a id="p02btn" onclick="p02Op()">description</a></li>
                <li><a id="p03btn" onclick="p03Op()">credits</a></li>
                <li><a id="p04btn" onclick="p04Op()">share</a></li>
            </ul>
            <div class="sX" onclick="closeSidePage()">
                <a>X</a>
            </div>
        </div>
        <div id="sContent">
            <div id="p01" class="sClose">open 1</div>
            <div id="p02" class="sClose">open 2</div>
            <div id="p03" class="sClose">open 3</div>
            <div id="p04" class="sClose">open 4</div>
        </div>
    </div>
    <div class="main">
        <h1>Links:</h1>
        <ul>
            <li>
                <a id="firstSidePage" onclick="openSidePage()">First Page</a>
            </li>
            <li>
                <a id="secondSidePage" onclick="openSidePage()">Second Page</a>
            </li>
            <li>
                <a id="thirdSidePage" onclick="openSidePage()">Third Page</a>
            </li>
        </ul>
    </div>
    <script src="app.js"></script>
</body>
</html>

CSS:

* {
    padding: 0;
    margin: 0;
}

.main {
    height: 100%;
    width: 100%;
    z-index: 1;
}

.sidePage {
    height: 80%;
    width: 80%;
    position: fixed;
    z-index: 4;
    top: 10%;
    right: -100vw;
    background-color: rgb(33, 33, 33)
}

.sNav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: 10%;
    position: absolute;
    bottom: 0;
}

.sOpen {
    display: block;
    opacity: 100%;
    color: white;
}

.sClose {
    display: none;
    opacity: 0%;
}

.sNav .sX {
    font-size: 40px;
    cursor: pointer;
    user-select: none;
    color: rgb(93, 206, 226);
}

.sNav ul li {
    list-style: none;
    font-size: 20pt;
    width: 15%;
    height: 100%;
    position: relative;
    color: rgb(93, 206, 226);
}

.sOptions {
    justify-content: space-around;
    align-items: center;
    display: flex;
    width: 80%;
}

JS:

var sP = document.querySelector(".sidePage");
var sPp01 = document.getElementById('p01');
var sPp02 = document.getElementById('p02');
var sPp03 = document.getElementById('p03');
var sPp04 = document.getElementById('p04');
let sPactive = false;
var sPopeners = document.querySelectorAll(".spOpener");
const sPcontent = document.getElementById("sContent");
var idString = '';

function sPopen(idHold) {
    idString = idHold.target.id;
    console.log(idString);
}

for (let i = 0; i < sPopeners.length; i++) {
    sPopeners[i].addEventListener('click', (idHold) => {
        sPopen(idHold);
    }, false);
}

let p01String = `text/p01/${idString}.txt`;
let p02String = `text/p02/${idString}.txt`;
let p03String = `text/p03/${idString}.txt`;
let p04String = `text/p04/${idString}.txt`;

function disappearDelay() {
    sPactive = false;
    sPp01.classList.remove("sOpen");
    sPp01.classList.add("sClose")
    sPp02.classList.remove("sOpen");
    sPp02.classList.add("sClose")
    sPp03.classList.remove("sOpen");
    sPp03.classList.add("sClose");
    sPp04.classList.remove("sOpen");
    sPp04.classList.add("sClose");
}

function closeSidePage() {
    sP.style.right = "-100vw";
    setTimeout(() => { disappearDelay(); }, 2000);
}

function openSidePage() {
    sP.style.right = "10%";
    sPactive = true;
    sPp01.classList.add("sOpen");
    sPp01.classList.remove("sClose");
}

function p01Output(data) {
    console.log(data);
    sPp01.innerHTML = this.responseText;
}

function p01Reader() {
    const p01Read = new XMLHttpRequest();
    p01Read.addEventListener('load', p01Output);
    p01Read.open('GET', p01String);
    p01Read.send();
}

if (sPactive = true) {
    p01Reader();
};

function p02Output() {
    sPp02.innerHTML = this.responseText;
}

function p02Reader() {
    const p02Read = new XMLHttpRequest();
    p02Read.addEventListener('load', p02Output);
    p02Read.open('GET', p02String);
    p02Read.send();
}

if (sPactive = true) {
    p02Reader();
};

function p03Output() {
    sPp03.innerHTML = this.responseText;
}

function p03Reader() {
    const p03Read = new XMLHttpRequest();
    p03Read.addEventListener('load', p03Output);
    p03Read.open('GET', p03String);
    p03Read.send();
}

if (sSactive = true) {
    p03Reader();
};

function p04Output() {
    sPp04.innerHTML = this.responseText;
}

function p04Reader() {
    const p04Read = new XMLHttpRequest();
    p04Read.addEventListener('load', p04Output);
    p04Read.open('GET', p04String);
    p04Read.send();
}

if (sSactive = true) {
    p04Reader();
};

function p01Op() {
    sPp01.classList.add("sOpen");
    sPp01.classList.remove("sClose")
    sPp02.classList.remove("sOpen");
    sPp02.classList.add("sClose")
    sPp03.classList.remove("sOpen");
    sPp03.classList.add("sClose")
    sPp04.classList.remove("sOpen");
    sPp04.classList.add("sClose");
}

function p02Op() {
    sPp02.classList.add("sOpen");
    sPp02.classList.remove("sClose")
    sPp01.classList.remove("sOpen");
    sPp01.classList.add("sClose")
    sPp03.classList.remove("sOpen");
    sPp03.classList.add("sClose")
    sPp04.classList.remove("sOpen");
    sPp04.classList.add("sClose");
}

function p03Op() {
    sPp03.classList.add("sOpen");
    sPp03.classList.remove("sClose")
    sPp02.classList.remove("sOpen");
    sPp02.classList.add("sClose")
    sPp01.classList.remove("sOpen");
    sPp01.classList.add("sClose")
    sPp04.classList.remove("sOpen");
    sPp04.classList.add("sClose");
}

function p04Op() {
    sPp04.classList.add("sOpen");
    sPp04.classList.remove("sClose")
    sPp02.classList.remove("sOpen");
    sPp02.classList.add("sClose")
    sPp03.classList.remove("sOpen");
    sPp03.classList.add("sClose")
    sPp01.classList.remove("sOpen");
    sPp01.classList.add("sClose");
}

I'm trying to make a JS application for my website that can generate pages without bringing the user to an actual separate page, rather just loading its contents onto a container above the main page. Things have gone fairly well, despite the disparity in my skill from when I began attempting JavaScript to now where I understand the standard practices better. The container for the additional page content is opened by specific links throughout the page, and is closed with a standard "x" button. These links are elements in the HTML with ID names that coincide with txt files that contain their specifics. The problem comes in with JavaScript reading the ID. I thought it would make sense if the directions to find the associated files through objects containing strings. Specifically, I used template literals, as they seemed to be the best and most current way to write a string containing variables. Within these template literals is the variable containing the ID of the clicked element that the file names coincide with. While the console shows that the ID values are being read and stored in the variable, the string won't update with it to actually load the generated page.

I tried my best to simplify the code, but if that's far too much to post onto the forum here, I'm more than willing to host the contents somewhere else or even just edit and simplify things a bit further. The reason I left so much of the code is because I want to be sure of any issues within that potentially causing this situation, as well as having an example with similar functionality to show how this whole system works. It's fairly convoluted and I have yet to find an example online that performs a similar task. However, I'm fairly certain that the problem lies within how I'm using the template literals.

The HTML includes some intrusive JS, though it was implemented before I understood how problematic that can be. I just need to know how to complete the intended implementation of the ID containing variable. If there's any other lessons I can learn, I'm open to any information or advice you've got :) thank you!

Because this is an application that requires directories, I've made a .zip of all of the relevant files. It's a Google Drive link, so I hope that it's already able to be clear that there's nothing malicious going on with the folder. Drive: https://drive.google.com/file/d/1ogt62OuE7wEHtWt4j8FPtH6ZAvfeOr7j/view?usp=sharing VirusTotal: https://www.virustotal.com/gui/file/a48628415a8dd508c697c7fb852c78fabbf17e952e22febb1e4d47fd3a9fff49/details

Simplest tweak is - instead of doing ``let p01String = `text/p01/${idString}.txt`;`` at the top level, put it inside a function - then, wherever you need to use `p01String` etc, call the function to get the most up-to-date values. — CertainPerformance, Oct 31 '22 at 23:40
I see! That's incredible how easy a fix that is. Thank you so much! — Dominic Merlo, Nov 01 '22 at 19:28

How should I go about regenerating template literals? Is this an improper way to go about things?

0 Answers0