So, I coded in a section of my project in which one image/link is hidden until the user goes to multiple other links and then back. When I open in live server from my computer, the javascript does exactly as it needs to do. Keeps the object hidden until these three links have been visited. I recently transferred over my code to neocities as I am hosting my project there, and I cannot figure out what the problem is. The system records a list of the links you visit, and I checked and it does output a list, but it will not perform the actions needed when this list is created.
I tried to switch between calling it hidden or block or none and removing the style display, yet nothing seems to work.
places.js
document.addEventListener("DOMContentLoaded", () => {
let page = String(window.location.pathname);
//collects path in current window
let list = JSON.parse(window.localStorage.getItem("list") || "[]");
//list for every page visited in local storage
if (!list.includes(page)) {
list.push(page)
window.localStorage.setItem("list", JSON.stringify(list))
//if page is not in list, it is now added to list.
}
if (list.includes("/clocktower/clocktower") && list.includes("/stables/stables") && list.includes("/bank/bank")) {
//checks list if three locations are there, if they are....reveals cemetery
document.getElementById("hiddenlink").style.display="block";
window.alert("Odd. Had I noticed that before?");
}
if (list.includes("/cemetery/cemetery")) {
/* this will reset the list once cemetery is visited*/
window.localStorage.setItem("list", "[]");
document.getElementById("hiddenlink").style.display="none";
}
})
Using window.alert(list); will produce something such as: /opening/places,/bank/bank,/clocktower/clocktower,/stables/stables
places.html (section is div class="cemetery" which is what I want to be hidden until the sections:clocktower, bank, and stables have all been visited. It works fine through my own live server, but after I uploaded it to an actual site, it cannot execute it. I think the problem is that is not looking through the list to see what it includes
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>San Roque, California</title>
<link rel="icon" type="image/x-icon" href="/misc/favicon.PNG">
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="background">
<div class ="inside">
<div class="places">
<div class="stables">
<a href="/stables/stables.html"><img src="stable.png" height="180"></a>
</div>
<div class="cemetery">
<a href="/cemetery/cemetery.html" id="hiddenlink" style="display: none;"><img src="graveyard.png" height="220"></a>
</div>
<div class="clocktower">
<a href="/clocktower/clocktower.html"><img src="clocktower.png" height="350"></a>
</div>
<div class="bankstore">
<img src="bankstore.png" usemap="#image-map" height = 200>
<map name="image-map">
<area target="" alt="bank" title="bank" href="/bank/bank.html" coords="0,0,165,200" shape="rect">
<area target="" alt="store" title="store" href="/store/store.html" coords="165,200,337s,0" shape="rect">
</map>
</div>
<div class="saloon">
<a href="/saloon/saloon.html"><img src="saloon.png" height="200"></a>
</div>
<div class="office">
<a href="/office/office.html"><img src="sheriff.png" height="200"></a>
</div>
</div>
</div>
</div>
<script src="places.js">
</script>
</body>
</html>
additional image for reference of the list output being made enter image description here
You've made a typo in places.js (and not your submission), where you're looking for list.includes("clocktower/clocktower") which is never satisfied, even when you visit the clock tower page (which pushes /clocktower/clocktower, with the leading slash)
