I have a page with several divs, each one a photo of a cat and some text and other info (it’s for a cat adoption agency page). Each div has a onclick which calls a JavaScript function and then transfers to a different page (going from page with many cats to page with a single cat).
I have tried a variety of ways to move the clicked on div to the new page but still not successful. I am currently making 2 calls, one when the user clicks on the cat pic, which saves the div to localstorage and then when the new page is loaded a second function is called to try and read and append that div into the new page. Here are the relevant code pieces.
function loadCatProfile() {
var cat = localStorage.getItem("catProfile");
var mydoc = document.getElementById("placeholder");
mydoc.append(cat);
}
function saveCatProfile(profile) {
localStorage.setItem("catProfile", profile);
window.location.href = "/singlecat.html";
}
Multi-Cat page that the user clicks….
<!DOCTYPE html>
<html>
<head>
<script src="/core/jscript.js"></script>
</head>
<body>
<div class="profile" onclick="saveCatProfile(this)" style="cursor: pointer">
<img src="/images/martin.webp" < />
<p>Martin</p>
<p>8 meses</p>
</div>
<div class="profile" onclick="saveCatProfile(this)" style="cursor: pointer">
<img class="cat-image" src="/images/vimes.webp" < />
<p id="cat-name">Sir Vimes</p>
<p class="cat-age">8 meses</p>
</div>
</body>
</html>
New single cat page that tries to read
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/core/jscript.js"></script>
</head>
<body>
<main>
<div id="placeholder">
<p>test</p>
</div>
</main>
<script>
loadCatProfile();
</script>
</body>
</html>
Tried saving then asigning the saved data to innerHTML of destination page, tried appending the saved div as child, read way too many web pages that were close in helping but not successful. This is a plain html/css javascript website, no frameworks or other libs.