Using JS to redirect instead of anchor tag

function setCard(){
const main = document.querySelector("main");

for(let i = 0; i < projectData.length; i++){
const card = makeCard(projectData[i].title);
main.appendChild(card);

card.addEventListener("click", () => {
localStorage.setItem("id", projectData[i].id);
})
}
}
function setCard(){
const main = document.querySelector("main");

for(let i = 0; i < projectData.length; i++){
const card = makeCard(projectData[i].title);
main.appendChild(card);

card.addEventListener("click", () => {
localStorage.setItem("id", projectData[i].id);
})
}
}
The makeCard() basically returns a div thats wrapped in an anchor tag. And I am adding click event listener to all the anchor tags cause i have to store the id in local storage of the card that has been clicked . This works but idk why something feels sketchy about this to me. Idk what. Does this approach have any drawback?
21 Replies
ἔρως
ἔρως3mo ago
yes: a right-click will record the information to the localstorage and too many event listeners can cause some performance issues how about you store the id once you visit the page? also, you're setting the same key with the value, which is going to always get overwritten when you open a new tab
glutonium
glutonium3mo ago
hmm.. Ig that can be solved through event delegation no?
ἔρως
ἔρως3mo ago
kinda you still need to check which button was clicked, with this approach also, a click doesn't mean a visit so, still a bad idea
glutonium
glutonium3mo ago
hmm.. lemme first explain you what m doing, basically I have a projects.html page where all my projects r being shown as cards (same ones returned by makeCard() , and each card have an id) now when a card is clicked it redirects me to projectDes.html where it shows the title and the description of the project. and i am using the id to get the corresponding projects description and title from the array that contains objects which basically represents each project. keys: title, id, description So essentially when a project is clicked I need to show a description of the project in the following page, so I need to know which card was clicked, hence m using id as a source for that
ἔρως
ἔρως3mo ago
still a terrible idea
glutonium
glutonium3mo ago
hmm so what approach you reckon would be a better choice
ἔρως
ἔρως3mo ago
just use the # part of the url to pass state or use query parameters both would be far superior to whatever you have and guess what? it works without attaching event listeners all over and storing unreliable data in the localstorage
glutonium
glutonium3mo ago
like getting it from the url?
ἔρως
ἔρως3mo ago
yes as you should have implemented in the first place
glutonium
glutonium3mo ago
I mean the thing is , the code I wrote was to help someone, that someone is trying to achieve it through JUST js cause they r a beginner the query param , I'll need php for that no? or wait no location.href but how do I add the id to the url? the only way Ik is when u use get method it adds it to the url
ἔρως
ἔρως3mo ago
no, you can read from the url you add it in html
glutonium
glutonium3mo ago
The term is called query parameter? Asking so I can look it up
ἔρως
ἔρως3mo ago
you can even be smart and not switch page at all, and just show the extra information in a dialog and that information is stored in an object it sounds like this is for a portfolio or something, so, this is a much better approach also, it saves network requests
glutonium
glutonium3mo ago
I mean true, but since the person that m tryna help wants to do it through a separate page I can't do that xD But query param seems like a solid approach the whole point is to basically share a state from 1 page to another
ἔρως
ἔρως3mo ago
you can use query parameters or pass an id through the hash
glutonium
glutonium3mo ago
k I'll take a look into query parameters first
ἔρως
ἔρως3mo ago
that's advanced you don't share state but sharing some information about what you want, that's easy
glutonium
glutonium3mo ago
the info about which card was clicked, does that consider as a state? ig not
ἔρως
ἔρως3mo ago
i don't that's a request
glutonium
glutonium3mo ago
hmm fair but ya I'll take a look into query parameters now thank you brother
ἔρως
ἔρως3mo ago
you're welcome