boton eliminar y addButton

Resuelto Rudi Sabri asked hace 10 meses • 0 respuestas

Creé un sitio web donde puedes guardar y eliminar tiempos. Al principio puedo ahorrar. Pero cuando elimino, elimino todas las veces y ya no puedo guardar nada. Además, cuando recargo la página, lo que eliminé vuelve. ¿Puede alguien ayudarme con esto? ¡Gracias de antemano!

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);
}

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;
}

<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>

Expandir fragmento

He buscado 3 horas, pero sin resultados.

Feb 16 '24 02:02 Rudi Sabri

Aceptado

Actualmente se deleteWorktimeestá eliminando todo myWorkingHoursdel DOM, por lo que no se puede guardar nada después de eliminarlo. En su lugar, debe borrar el HTML interno de myWorkingHourspara eliminar todos los tiempos guardados. Además, los datos no persisten después de recargar la página porque myWorkingHours.innerHTMLno se configuran desde localStorage cuando se carga la página. Debe recuperar el HTML guardado de localStorage y configurarlo como el HTML interno myWorkingHourscuando se carga la página. Por último, sicherheitsabfrageno está definido correctamente. Debería ser un cuadro de diálogo de confirmación que le pregunte al usuario si está seguro de querer eliminar todo el tiempo.

Mostrar fragmento de código

// Retrieve saved times from localStorage when the page loads
window.onload = function() {
    let myWorkingHours = document.getElementById("myWorkingHours");
    myWorkingHours.innerHTML = localStorage.getItem('html') || '';
}

function deleteWorktime() {
    let myWorkingHours = document.getElementById("myWorkingHours");
    // Clear the innerHTML of the myWorkingHours div
    myWorkingHours.innerHTML = '';
    // Remove the saved times from localStorage
    localStorage.removeItem('html');
}

function sicherheitsabfrage() {
    let confirmDelete = confirm('Möchten Sie wirklich alle Arbeitszeiten löschen?');
    return confirmDelete ? deleteWorktime() : null;
}

function addWorktime() {
    let myWorkingHours = document.getElementById("myWorkingHours");
    let currentDate = document.getElementById("myDate").value;
    let startTime = document.getElementById("myStartTime").value;
    let endTime = document.getElementById("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);
}

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;
}

<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="sicherheitsabfrage()"> Alle Arbeitszeiten löschen</button>
<div id="myWorkingHours"></div>

Expand snippet

Feb 16 '2024 08:02 Keyboard Corporation