journal js
on my diary page, i made a simple js file to allow me to hide/show article on click & have a message display if i hadn't written anything. i use this for pretty much everything on my site, i love it that much! if you want to just see the code here it is, but i highly suggest reading through to see how this works!
i'll try to explain this to the best of my ability, but please reach out to me through email if you have any questions !!
prelim
for this code, you'll need a link, a main spot to display, as well as an article. i use div's and articles for this, but i'm sure anything else will work as well, as long as you edit the code to match it.
I
first, we need to declare some universal variables. those will be the amount of articles and the current url.
we'll define these as followed...
const amount = document.getElementsByTagName('article');
let host = window.location.href;
note that the defining host is optional, it's only needed if you need a function to run on a specific page. for example, the "error" message on my diary page only runs on that page because of this. !
next, we'll move on to creating the show function.
II
this part requires a function. this function will take an id as a parameter. the id being the id of the passage that needs to be shown.
function showThis(pass){}
with this, your links should include this as an onclick event. here's what that would look like.
<a href="#" onclick="showThis('test')"> Test</a>
YOU MUST BE CONSISTENT WITH ID NAMING !
whatever is in the '' MUST match the id of the article !
this works for both number id's and words! you also don't have to assign an actual "link" in a href spot, but you can if you want to as a fall-back.
now, we'll start writing the actual function. for this, i recommend adding console.log() lines for debugging, it's super helpful to what parts of your code are or aren't running !
III
this is where we'll be putting all the logic in, for this, i mainly use for loops & if else statements.
to check if your function actually runs when you click, inside the function write the following...
console.log(pass);
this will show if the function a) runs & b) returns the right passage. if this doesn't work, check if the id's are the same and that you've correctly added the onclick event.
after, we'll start writing the for loop.
the header will look like this...
for (let i = 0; i < amount.length; i++){}
written in english, this says starting from 0, for the amount of articles in "amount", keep iterating. when we had defined amount, we technically defined it as an array. this allows us to check each article in the spot at which it is contained in an article.
after, we'll write this...
let target = document.getElementById(pass);
this assigns target to the id of the passage we want to display.
now, we'll use an if else statement to see if the current id of the article we're on matches the targets id...
if (amount[i].id === target.id){}
within the curly braces, we can write this to display the article...
amount[i].style.display = 'block';
amount[i].style.overflow = 'scroll';
this directly changes whatever display it was to "block" and allows for overflow. in here, you technically add whatever.
now, we are going to start showing the "error" message. as mentioned above, this part is optional ! you can jump here if you want to skip it.
III A
right under the above code, we're going to add an if statement-NOT AN IF ELSE-that checks if the current url matches the one we want this part of the code we want to run.
we'll write this...
if (host.includes("something.html")){}
in this code, we will be scanning what the url is and seeing if it includes the file on which we want it to run, for example a file named "diary.html".
with in that, we'll define how many <p> tags there are or any other tags.
let ps = amount[i].getElementsByTagName('p');
now we'll add another if statement to see if the amount equals zero.
if (ps.length === 0){}
with in this, we can make it so that text will be displayed in it's place...
amount[i].innerHTML = "wow
"
since this is still running within the for loop, the amount article won't change by the time this runs !
for both of these, if these conditions aren't met, they'll simply just move on.
III B
the next part of this is simpler, since our big if statement is checking to display the current target, it should hide any others that might be displayed, so we write it as follows...
else {
amount[i].style.display = 'none';
}
and that's it ! you can easily modify this to include more functions, but this is what i stick with for now.
IIII
here is the full code with comments. it also has a little reset function that's really simple, so i didn't feel the need to cover it in here. the whole code was a bit too large for this article, and it became hard to read.
for the future, i want to see if i can incorporate a memory system, where it will display the last article you were on upon re entering. but for now, i'm very happy with this and i hope you are as well !