When the user clicks on the card on the html, it activates a onclick command on line 19.
$('.player-card').click(function() {
id = event.currentTarget.id;
// Each card has its own ID, just figuring out which card you hit based on that id
if (check == 0) {
// this is so i dont override my backup
backup = $("#"+id).clone()
// creates backup so the user can navigate back'
}
check=1;
// preventing override next time card is clicked (for back button)
arr = tags[id];
// doesn't matter for this issue
$("#"+id).html(`HTML goes here- see pen for details`)
// inserting the new html, notice the back button. Doesn't matter for this issue.
});
When they click i get the ID, check if this is their first time hitting the card, then if that passes i try and use .clone() to clone the HTML object for later.
backup = $("#"+id).clone()
Note: i initially declared backup as: let backup = "Error 404, backup not found";
Now when the user tries to use that back button on JS line 48 i have
$(document).on('click', '.back', function(){
console.log(backup)
// just a check. Console does not come back with this at all menaing this onclick is not being activated
$("#"+id).replaceWith(backup)
// created a copy of playercard before i changed it
check = 0;
})
For some reason backup variable is not overridden, so i here .player-card is shifted to .backup’s innialte value instead of HTMl which is should’ve cloned- which it did not.
After all of this, why is .clone() just not activating?
When you create/modify the elements you were listening to, you need to rebind the events to have effects on the new ones. Which means you’d need to call on('click') on .player-card again.
Another way to do it would be to listen on the document itself and filter to only .player-card.
You have only one backup, so you’re overwriting the first one when you click on the second. One idea to solve it is by having backup to be an array of objects, each object could be like { id: 1, backup: '...' }.
Okay i am very close to getting this working (thanks to your help) but i ran into one last issue when making the database:
let backupObj = {
}
$(document).on('click', '.player-card', function(event) {
id = event.currentTarget.id; console.log(check)
id = Number(id)
if (check == 0) {
backup = $("#"+id).clone()
backupObj[id] = backup
}
check=1;
arr = tags[id];
console.log(arr) // Goes onto the card
$("#"+id).html(`HTML GOES HERE`)
// inserting the new html, notice the back button
});
$(document).on('click', '.back', function(){
$("#"+id).replaceWith(backupObj[id]) // calling from databse
console.log(id+ " ID")
console.log(backupObj)
check = 0;
})
});
Now for some reason, I can only do one at a time. When I do two at a time, one just tends to delete itself despite me saving it has two different things in the object storage.
It also can only do it once when switching back it forth. On the second attempt when i go to hit back it just doesn’t work. Why is it able to do it once, then not be able to do it again?
You’re overwriting everything because you’re using only one id and check variables. If you think about, when the user clicks on a .played-card it will set id and check, then when the user clicks on the second .played-card it will overwrite those variables and you’ll lost track of the first one.
It would take too long to demonstrate here what I mean, so I’ve forked your project, made the changes and added some comments. Let me know if you don’t understand something.
if (backupObj[id] || $(event.target).hasClass('back')) {
return;
}
Is this to prevent overwriting the variables, so it skips to the back button on click event lister since both are activated when you hit the .playercard?
Ps
I saw your Technical documentation project, i suggest using a less bright red. Otherwise its awesome.
Yes. But I don’t think the order in which the functions are called are guaranteed, what we know is that both will be called when the user clicks on the back button. Since we don’t want to run that function when the user clicks on the back button, because if it runs before the other one it will overwrite the backup, we just return from it.
Thanks, I agree! I took my time to do the mobile version but kinda of rush for the desktop. Definitely going back to improve it later.
For some reason my media quires on line 113 (on codepen) just do not work. I have never seen this issue before. Randomly stuff like my container will not go to 100% width
For some reason my media quires on line 113 (on codepen) just do not work. I have never seen this issue before. Randomly stuff like my container will not go to 100% width.
I have used media query’s in the exact same way before with no issue, but now it just wont work.
Fix your imports, you have a multitude of stuff overriding your stuff. Look in google developer console, your @media is the last one on this list, there’s _grid.scss and boostrap overriding it.
If multiple css selector target the same element, then whichever is called last overrides the previous one. If you look at your css imports, you’ll see that your own css is being imported first, then bootstrap. Which means bootstrap will override your own css when they target the same element.
You have multiple problems in your index.html, I’d fix them one by one:
You have 2 head tags. Delete one.
You have 3 bootstrap imports. Use only one.
Your own css import is above two of the bootstrap imports. Make your own css import the last.