Keeping value changes through links

Question

For a school work, I have to create a page that changes depending on the clicked link.
To be clearer, I start from a page with different links on it, and whatever the link I click on it brings to the same html page, but its content has to change depending on the clicked link with JavaScript.

What I thought was the easiest way, was to get the id of the clicked link on click, and, depending on it, the page content would change, but I can't keep this value through pages change.

Do you have an idea? (By the way, I am authorized to seek help for this project).

Are we talking about a single page application? You could use the hash-part of the url to determine what content to show. — Thomas, Nov 14 '20 at 13:14
It sounds like you might need the [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). But please clarify the requirements a bit more, because if it's just a simple different content depending on the url then there is no need to use the history api at all — yi fan song, Nov 14 '20 at 13:22

score 0 · Answer 1 · answered Nov 14 '20 at 13:23

Something like this should get you started.

function myFunc(e){
  e.preventDefault();
  let aa = event.target.innerText;
  console.log(aa)
  const msg = document.getElementById('msg');
  msg.innerText = 'Hello: ' + aa;
  msg.classList.add('wow');
}

.wow{
  width: 90%;
  padding: 20px 50px;
  margin-top: 20px;
  font-size: 3rem;
  color: firebrick;
  background: wheat;
  border:1px solid orange;
}

<a href="bob" onclick="myFunc(event)">Bob</a>
<a href="sam" onclick="myFunc(event)">Sam</a>
<div id="msg"></div>

This seems to be what I need but will it work through pages change ? I mean, the links, here "Bob" and "Sam", are href in my cases, so the load of a new page may reset all this no ? — Jo_Byr, Nov 14 '20 at 14:32

score 0 · Answer 2 · answered Nov 14 '20 at 13:48

0

A basic example using HTML and CSS to show different parts of the page depending on the hash.

.page {
    display: none;
}

.page:target {
    display: block;
}

<a href="#page1">Show Page 1</a><br>
<a href="#page2">Show Page 2</a><br>


<div class="page" id="page1">
<h2>Content 1</h2>
</div>

<div class="page" id="page2">
<h2>Content 2</h2>
</div>

And a basic example using the hashchange event.

addEventListener("hashchange", function(event) {
  console.log("Show Content for", location.hash);
});

<a href="#page1">Show Page 1</a><br>
<a href="#page2">Show Page 2</a><br>

answered Nov 14 '20 at 13:48

Thomas

11,958
1
14
23

When I use that, nothing displays in the console as we change page. And that's what I try to avoid – Jo_Byr Nov 14 '20 at 14:53
@Jo_Byr The first snippet is an example that you can achieve that completely without JS . The second example currently logs the hash-change. There you could replace the `console.log` with some code that would update the page. – Thomas Nov 14 '20 at 16:24

score 0 · Answer 3 · answered Nov 14 '20 at 15:55

0

I misunderstood your question. Please ignore my first answer - but I will leave it there for your reference.

What you are looking for is called query strings (sometimes called get strings). Query strings are appended to the url in the format:

https://example.com?varname=varvalue&nuthervar=different value

So, you would configure your anchor tags like this:

<a href="next_page_to_view.html?name=bob">Bob</a>
<a href="next_page_to_view.html?name=sam">Sam</a>

On the other page, next_page_to_view.html in this example, you can have code similar to:

let qs = window.location.search;
const urlParams = new URLSearchParams(qs);
const name = urlParams.get('name')
if (name === 'bob'){
   alert('hi bob');
}

Use the javascript example provided in my first, incorrect, answer to schlep a user-specific message into a div (instead of the alert() message).

Reference:

https://www.sitepoint.com/get-url-parameters-with-javascript/

Is there any method to get the URL without query string?

answered Nov 14 '20 at 15:55

cssyphus

37,875
18
96
111

Sorry but this isn't what i need. I need to have one modulable html page. And your propositions rely on 2. I really need one only because there are 12 links on the page so I can't create 12 pages that are almost the same. – Jo_Byr Nov 14 '20 at 16:49
My first answer assumed that you were updating the same page that contained the links. This answer assumes there is a second page that all links navigate to, and you wish to update that second page differently depending on the query string in the clicked link. Perhaps you do not understand how this second answer allows you to update the `next_page_to_view.html` according to which link was clicked? Otherwise, please explain further to help me understand. – cssyphus Nov 14 '20 at 17:03
So with this solution I could code only one html doc and the result in the navigator could vary ? I'm sorry for having trouble to understand, I've been coding in HTML, CSS and JS for only 2 months and I am not english so it's pretty harsh to understand every subtelties of your answers. – Jo_Byr Nov 14 '20 at 17:26
Your question asked for two pages, am I right? On the first page, there are several links. All links send the user ("navigate") to the second page - but what is displayed on the second page depends on the link that was clicked. You can use the code above to make that happen because each `` link has a slightly different `href=""` attribute, using query strings. On the second page, you can read this via `window.location.search`. You can parse the query string using `URLSearchParams()`. And you can "get" the desired parts of the query string as shown above. *Meilleurs voeux with your project* – cssyphus Nov 16 '20 at 14:00

Keeping value changes through links

3 Answers3

Reference: