I am adding the functionality to move back or forward to a previous page. I implemented the popState and PushState, but I'm getting this error;
DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'https://jsonplaceholder.typicode.com/users/' cannot be created in a document with origin 'http://127.0.0.1:5500' and URL 'http://127.0.0.1:5500/index.html#'
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="'wrap">
<button class = B1 id="users">View users</button>
<input type="search" id="input" placeholder="Search a user">
</div>
<div id="results"></div>
</div>
<script>
const renderResult = (i, v) => {
const pre_id = document.createElement("pre");
const dt_id = document.createElement("dt");
dt_id.textContent = i;
pre_id.appendChild(dt_id);
if (v !== "undefined") {
const dd_id = document.createElement("dd");
const dd_text = document.createElement("dd");
dd_id.textContent = v;
pre_id.appendChild(dd_id);
}
return pre_id;
};
const formatUser = (obj, level) => {
const dl = document.createElement("dl");
let padString = "";
for (let k = 0; k < level; k++) {
padString += " ";
}
for (let k in obj) {
if (typeof obj[k] === "object") {
dl.appendChild(renderResult(k));
console.log(padString + k + ":");
if (Array.isArray(obj[k])) {
obj[k].forEach((element) => {
if (typeof element === "object") {
dl.appendChild(formatUser(element, level + 1));
} else {
dl.appendChild(renderResult(element));
console.log(padString + element);
}
});
} else {
dl.appendChild(formatUser(obj[k], level + 1));
}
} else {
dl.appendChild(renderResult(k, obj[k]));
}
}
return dl;
};
const results = document.getElementById("results");
function getUsers(url) {
results.innerHTML = "";
fetch(url)
.then((res) => (res.ok ? res.json() : Promise.reject(res)))
.then((data) => {
results.innerHTML = "";
if (Array.isArray(data)) {
data.forEach((item) => {
results.append(
formatUser(item, 0),
);
});
} else {
results.append(formatUser(data));
}
// push the new result into the browser's history
history.pushState({ result: data }, '', url);
})
.catch(console.error);
}
// detect when the user goes back and retrieve the previous result
window.addEventListener('popstate', function(event) {
if (event.state && event.state.result) {
// render the previous result
results.innerHTML = "";
if (Array.isArray(event.state.result)) {
event.state.result.forEach((item) => {
results.append(
formatUser(item, 0),
);
});
} else {
results.append(formatUser(event.state.result));
}
}
});
const users = document.getElementById("users");
users.addEventListener(
"onclick",
getUsers(`https://jsonplaceholder.typicode.com/users/`)
);
const input = document.getElementById("input");
input.addEventListener("change", (event) =>
getUsers(`https://jsonplaceholder.typicode.com/users/${event.target.value}`)
);
</script>
</body>
</html>