I built a website where you can save and delete times. At the beginning I can save. But when I delete, I delete all times and can no longer save anything. Also, when I reload the page, what I deleted is back. Can anybody help me with this? Thanks in advance!
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arbeitszeiten App</title>
<style>
body {
display: flex;
flex-direction: column;
gap: 16px;
background-color: white;
font-family: "Roboto";
}
#addbutton {
background-color: rgb(7, 158, 240);
color: white;
border: none;
font-size: 20px;
padding: 16px;
cursor: pointer;
}
#deletebutton{
background-color: red;
color: white;
border: none;
font-size: 20px;
padding: 16px;
cursor: pointer;
}
input {
border: 1px solid rgba(0, 0, 0, 0.12);
height: 50px;
border-radius: 8px;
width: calc(100% - 16px);
}
.list-item {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.12);
padding: 16px;
border-radius: 8px;
font-weight: 60;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 16px;
}
.small-img {
width: 24px;
height: 24px;
}
</style>
</head>
<body>
<h1>Arbeitszeiten</h1>
<input id="myDate" placeholder="Datum einfügen" type="date">
<input id="myStartTime" placeholder="Startzeit einfügen" type="time">
<input id="myEndTime" placeholder="Endzeit einfügen" type="time">
<button id="addbutton" onclick="addWorktime()">Speichern</button>
<button id="deletebutton" onclick="deleteWorktime()" onclick="sicherheitsabfrage()"> Alle Arbeitszeiten löschen</button>
<div id="myWorkingHours">
</div>
<script src="script.js"></script>
</body>
</html>
and the javascript file:
function deleteWorktime() {
let myWorkingHours = document.getElementById("myWorkingHours");
myWorkingHours.parentNode.removeChild(myWorkingHours)
}
function sicherheitsabfrage(){
confirm(message)
}
myWorkingHours.innerHTML = localStorage.getItem('html');
function addWorktime() {
let currentDate = myDate.value;
let startTime = myStartTime.value;
let endTime = myEndTime.value;
myWorkingHours.innerHTML +=
`<div class="list-item">
<img class="small-img" src="img/Uhr.png">
${currentDate} ${startTime} - ${endTime}
</div>`;
localStorage.setItem('html', myWorkingHours.innerHTML);
}
I have search 3 hours, but with not results