I am helping a friend with a website that they are trying to make and I am trying to add an admin button that will allow them to click the button to add/delete the car description, picture, and price. I also need them to stay on the page after the page reloads. What is the best way of going about this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="test.css" rel="stylesheet">
<title>Cars</title>
</head>
<body>
<h1>Items</h1>
<ul id="items">
<li><span>Delete</span></li>
</ul>
<button type="button" id="add-item">Add item</button>
<script src="test.js"></script>
</body>
</html>
ul {
padding: 0px;
}
li {
display: flex;
background-color: #eee;
margin: 5px;
padding: 5px;
align-items: center;
}
li > span {
margin-left: auto;
background-color: #aaa;
padding: 5px;
cursor: pointer;
}
let addButton = document.getElementById("add-item");
const curIndex = 0;
addButton.addEventListener("click", function() {
// Retrieves the 'list'
let list = document.getElementById("items");
let textNode = window.prompt("Enter item:");
if (textNode != null) {
let item = document.createElement("li");
//Creates a textnode from the users input
item.appendChild(document.createTextNode(textNode));
//Adds the users textnode at the end of the list
list.appendChild(item);
// Creates a delete button
let deleteButton = document.createElement("span");
deleteButton.innerHTML = "Delete"
item.appendChild(deleteButton)
}
});
My Answer:
To save the added items after the page reloads, you can use localStorage to store the list items. Here is an updated version of your JavaScript code:
javascript
let addButton = document.getElementById("add-item");
let list = document.getElementById("items");
// Load items from localStorage on page load
document.addEventListener("DOMContentLoaded", function() {
let items = JSON.parse(localStorage.getItem("items")) || [];
items.forEach(function(itemText) {
let item = document.createElement("li");
item.appendChild(document.createTextNode(itemText));
let deleteButton = document.createElement("span");
deleteButton.innerHTML = "Delete";
item.appendChild(deleteButton);
list.appendChild(item);
});
});
addButton.addEventListener("click", function() {
let textNode = window.prompt("Enter item:");
if (textNode != null) {
let item = document.createElement("li");
item.appendChild(document.createTextNode(textNode));
let deleteButton = document.createElement("span");
deleteButton.innerHTML = "Delete";
item.appendChild(deleteButton);
list.appendChild(item);
// Save items to localStorage
let items = JSON.parse(localStorage.getItem("items")) || [];
items.push(textNode);
localStorage.setItem("items", JSON.stringify(items));
}
});
// Event delegation to handle delete button clicks
list.addEventListener("click", function(event) {
if (event.target.tagName === "SPAN") {
let item = event.target.parentNode;
item.remove();
// Remove item from localStorage
let items = JSON.parse(localStorage.getItem("items")) || [];
let itemText = item.textContent;
items = items.filter(function(text) {
return text !== itemText;
});
localStorage.setItem("items", JSON.stringify(items));
}
});
With this code, the added items will be saved in localStorage and loaded back into the list on page reload. The delete functionality is also implemented using event delegation to handle clicks on the delete buttons.
Rate this post
5 of 5 based on 9159 votesComments