Я пытаюсь создать что-то вроде компактного трекера/создателя встреч с помощью javascript. Проблема в том, что я совершенно новичок в JavaScript, поэтому не могу создать сценарий для создания элемента списка там, где я хочу. Кроме того, я бы хотел, чтобы событие оставалось там, пока я его не удалю. HTML-код:
Страница предварительного просмотра:
Я хотел бы взять все данные из левой формы и отобразить их в среднем элементе div, как в примере, который я сделал (вручную).
При поиске в Интернете я нашел код и попытался адаптировать его под свои нужды, придумав следующее:
// Definiamo l'array per gli eventi (= prenotazioni)
let events = [];
// Prendiamo i dati dagli Input
let eventDataInput = document.getElementById("eventData");
let eventNameInput = document.getElementById("eventName");
let eventTimeInput = document.getElementById("eventTime");
let eventList = document.getElementById("eventList");
let eventIdCounter = 1;
// Funzione per creare gli eventi
function addEvent() {
let data = eventDataInput.value;
let name = eventPGInput.value;
let orario = eventTimeInput.value;
if (data && name && orario) {
// Creiamo un ID unico
let eventId = eventIdCounter++;
events.push(
{
id: eventId, date: data,
nome: name, ora: orario
}
);
eventDataInput.value = "";
eventPGInput.value = "";
eventTimeInput.value = "";
displayReminders();
}
}
// Funzione per eliminare un evento con l'ID
function deleteEvent(eventId) {
// Trova l'ID richiesto
let eventIndex = events.findIndex(
(event) => event.id === eventId);
if (eventIndex !== -1) {
// Rimuovi l'evento dall'array
events.splice(eventIndex, 1);
displayReminders();
}
}
// Funzione per trovare giorno della settimana
function toDayString() {
const weekday = ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"];
const d = event.date;
let day = weekday[d.getDay()];
}
// Funzione per mostrare i reminders (= prenotazioni)
function displayReminders() {
eventList.innerHTML = "";
for (let i = 0; i < events.lenght; i++) {
let event = events[i];
let eventData = new Date(event.date);
let listItem = document.createElement("li");
listItem.innerHTML =
`[b]${event.nome}[/b] -
${eventData.toLocaleDateString()}, ${event.ora}[/i]`;
// Aggiungiamo il pulsante per cancellare
let deleteButton =
document.createElement("button");
deleteButton.className = "delete";
deleteButton.textContent = "X";
deleteButton.onclick = function() {
deleteEvent(event.id);
};
listItem.appendChild(deleteButton);
eventList.appendChild(listItem);
}
}
Проблема сейчас в том, что когда я нажимаю «Отправить», скрипт только удаляет созданный мною пример, но не создает новый элемент списка. .
Кроме того, каждый раз, когда я перезагружаю страницу, все сбрасывается, но я хочу, чтобы созданные встречи оставались.
Спасибо!
[b] Я пытаюсь создать что-то вроде компактного трекера/создателя встреч с помощью javascript. Проблема в том, что я совершенно новичок в JavaScript, поэтому не могу создать сценарий для создания элемента списка там, где я хочу. Кроме того, я бы хотел, чтобы событие оставалось там, пока я его не удалю. [b]HTML-код:[/b] [code]
::-webkit-scrollbar { width: 2px; } [/code] [b]Страница предварительного просмотра:[/b] [i] Я хотел бы взять все данные из левой формы и отобразить их в среднем элементе div, как в примере, который я сделал (вручную). При поиске в Интернете я нашел код и попытался адаптировать его под свои нужды, придумав следующее: [code]// Definiamo l'array per gli eventi (= prenotazioni) let events = [];
// Prendiamo i dati dagli Input let eventDataInput = document.getElementById("eventData");
let eventNameInput = document.getElementById("eventName");
let eventTimeInput = document.getElementById("eventTime");
let eventList = document.getElementById("eventList");
let eventIdCounter = 1;
// Funzione per creare gli eventi function addEvent() { let data = eventDataInput.value; let name = eventPGInput.value; let orario = eventTimeInput.value;
if (data && name && orario) { // Creiamo un ID unico let eventId = eventIdCounter++;
// Funzione per eliminare un evento con l'ID function deleteEvent(eventId) { // Trova l'ID richiesto let eventIndex = events.findIndex( (event) => event.id === eventId);
// Funzione per trovare giorno della settimana function toDayString() { const weekday = ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"]; const d = event.date; let day = weekday[d.getDay()]; }
// Funzione per mostrare i reminders (= prenotazioni) function displayReminders() { eventList.innerHTML = ""; for (let i = 0; i < events.lenght; i++) { let event = events[i]; let eventData = new Date(event.date); let listItem = document.createElement("li"); listItem.innerHTML = `[b]${event.nome}[/b] - ${eventData.toLocaleDateString()}, ${event.ora}[/i]`;
// Aggiungiamo il pulsante per cancellare let deleteButton = document.createElement("button"); deleteButton.className = "delete"; deleteButton.textContent = "X"; deleteButton.onclick = function() { deleteEvent(event.id); };
listItem.appendChild(deleteButton); eventList.appendChild(listItem); } } [/code] Проблема сейчас в том, что когда я нажимаю «Отправить», скрипт только удаляет созданный мною пример, но не создает новый элемент списка. .
Кроме того, каждый раз, когда я перезагружаю страницу, все сбрасывается, но я хочу, чтобы созданные встречи оставались. Спасибо!
Мобильная версия