Opening Local HTML Files using HTML and Javascript

Question

I have a project I'm working on and I am trying to do file organisation with it

I want to open a html file in a folder before it.

Here is an example of the folder tree I am creating:

• Main Folder
  • Game_Folder
    • Rules

Each folder has a HTML, CSS and JS file in it (For organisation reasons). But I want to be able to open 'Game_Folder.html' from the 'Rules.html'. I know how to do it from the other way, I just cannot figure out how to do it backwards.

I cannot use a full directory (c:/) as it will be operated on a few different computers. So the file location must be in local file format (if that makes sense).

Thanks in Advance

-J

• felipsmartins: I would like to help you, but is is unclear what you're asking. What you have tried so far? And what do you mean by "open" HTML file?
• frodo2975: Agreed, what do you mean by "open" the html? It sounds like you may not be very familiar with how webpages work. Normally, you've got a server running at your root directory, so if you ask it for mysite.com/game/rules/rules.html, it would serve the appropriate file, relative to your root.
• StackSlave: . = current working directory (not needed usually). ../ = up one level. folderNameHere = down a level. folderNameHere/someFile.html = down a level and access file. ../folderNameHere/someFile.html = up a level down to the folder and access the file.

Answer 1

Navigating backwards using ..

Background info

I don't know if you are familiar with the command line but typing cd .. moves you backwards from one directory. This can also be used to reference files outside your current directory

Presumed file layout

Presuming that your file layout is like this:

-> /Main_Folder
 -> index.html
 -> /Game_Folder
 -> game_folder.html
 -> /Rules_Folder
 -> rules.html

Proposed solution

You can use this rule as below to reference your game_folder.html from your rules.html:

<a href="../game_folder.html">Click to open</a>

Other resources

Some other things worth looking at are: This answer where I based my answer from

This article from W3 schools

Also leave a comment if you have any questions