在 html 页面之间操作值

Question

I'm creating a portfolio, and in that portfolio there will be several cards, and the purpose of these cards will be for them to be redirected to another page with detailed information. And that's where the question comes in, instead of creating an html page for each card wouldn't it be advantageous to make a page only, and change the values between each card when clicked on js? A buddy told me that there is a rounter property of react, where it is possible to do this, but the project is simple for now, and I would like to solve this issue with js. Below is a separate example (which is not part of the main project): Main page:

<a href="/pagina2.html" id="a1">Aqui</a>
<a href="/pagina2.html" id="aa">Teste</a>

Page 2

<div id="main">
        <h1 id="title">Lindo</h1>
</div>

Js

let a1 = document.getElementById('a1');
var aa = document.getElementById('aa');
var h1 = document.querySelector('#title');
var main = document.getElementById('main');


if (onclick == a1) {
    title.innerText = "Leandro O cachorro";
    main.style.backgroundColor = 'green';
}else if(onclick == aa){
    console.log('era pra estar vermelho');
    title.innerText = "Belle Belinha";
    main.style.backgroundColor = 'red';
}

I tried to use the if-else sentence, but it only takes the first if, even clicking on link 2

Answer 1

instead of creating an html page for each card wouldn't it be advantageous to make a page only, and change the values between each card when clicked on js?

Of course, everyone loves that way.

Frankly speaking, it is possible but you can't achieve this with just what you are showing above. I think you can't achieve what you want in that way.

So instead, I will recommend you to use react . In case you don't like it, take a look of alternatives below.

---

If you consider react is overkill, you can try a simpler solution: static site generator . Check: Hugo , Jekyll , Eleventy , etc... These approaches help you focus on site building instead of architecture and technical building.

If you want a lighter solution and prefer to do more stuff, then pick a bundler like webpack , rollup , parcel , etc... and then apply templating libraries likes Handlebar JS , Mustache JS , Liquid JS , EJS , etc... This approach will give you more chance to do low-level stuff and super lightweight.

Lastly, build everything from scratch. yes, still possible but sure unless you know most of the things and know where to go, and what to do.

Answer 2

The only one trick I could think of for exchanging information between different pages while only using front-end javascript: You can link to the other page using parameters at the end: IE: myUrl + "?myParameter1=myValue1&myParameter2=myValue2"

Now on that second page you could retrieve those parameters using:

var url = new URL(window.location.href);
url.searchParams.get("myParameter1"); // "myValue1"
url.searchParams.get("myParameter2"); // "myValue2"
//...

...and depending on the parameter(s) passed, you can now display different content on the page, which can even be bookmarked or even shared via the link (as a nice sideffect).

Edit: Sorry, I might have misunderstood your question, but maybe this helps you to find an alternate solution anyway (at least you won't have to make a new html page for EVERY card, just one).