Okno dialogowe prompt i atrybut onclick | Dodajemy zadanie za pomocą przycisku i okna dialogowego prompt

Mimo że nasze zadania wyświetlają się i aktualizują już nie tylko w konsoli, ale także w przeglądarce, nadal musimy nimi zarządzać z poziomu konsoli za pomocą ręcznie wpisywanych stworzonych przez nas funkcji...

Jest to niewygodne, ale także uniemożliwia zwykłym nieprogramującym użytkownikom korzystanie z naszej aplikacji.

Dlatego naszym kolejnym krokiem jest zmodyfikowanie funkcji addTask() w taki sposób, aby otwierała wbudowane okno dialogowe przeglądarki prompt, w którym użytkownik może wpisać swoje zadanie i kliknąć Enter, natomiast funkcja ta będzie wywoływana przez kliknięcie przycisku "dodaj zadanie".

prompt()

Najpierw sprawdźmy, czym jest wbudowana funkcja prompt(). Wpisz w konsoli prompt(), kliknij Enter i zobacz, co się stało. Na górze przeglądarki otworzyło się nowe okno z polem do wprowadzania treści.

Jeśli coś tam wpiszesz, a potem klikniesz Enter lub przycisk OK, w konsoli zostanie zwrócona treść, którą wpisałeś/aś, w postaci ciągu tekstowego (string)! Jeśli z kolei klikniesz przycisk Anuluj/ Cancel lub też Esc na klawiaturze, funkcja zwróci null, czyli brak treści.

Mamy teraz wygodne wbudowane narzędzie do pobierania danych od użytkownika, które może nam zastąpić klasyczny formularz (oraz konieczność wklepywania tej treści ręcznie w funkcji addTask() w konsoli). Owszem, w poważnych aplikacjach korzystamy z formularzy, aczkolwiek na razie wystarczy nam takie działające rozwiązanie. Rozbudujmy teraz funkcję addTask(), dodając tę funkcjonalność:

// usuń argument newTask z nawiasów funkcji,
// ponieważ nie będziemy już go wprowadzać ręcznie:
function addTask() {
  // deklarujemy zmienną newTask, używając const, ponieważ nie będziemy jej modyfikować,
  // która przyjmuje wartość zwracaną przez wbudowaną funkcję prompt(),
  // która to wartość jest tym, co wpisze użytkownik w oknie:
  const newTask = prompt("Wpisz nowe zadanie:");

  // reszta kodu pozostaje bez zmian:
  tasks.push(newTask);

  updateTasksInLocalStorage();

  console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

  renderTasks();
}

Tak! Teraz możemy doświadczyć namiastki prawdziwej aplikacji! Co ciekawe, to okienko jest także dostępne na telefonach, w związku z czym, gdybyśmy opublikowali naszą aplikację jako prawdziwą stronę w internecie (a mogę Cię tego nauczyć), a potem otworzylibyśmy ją w przeglądarce na telefonie, to zadziała tak samo.

atrybut HTML onclick

Musimy teraz dopisać dosłownie kilka znaków w naszym kodzie HTML, by wywołać funkcję addTask() poprzez kliknięcie przycisku Dodaj zadanie. W związku z tym otwórz plik todo-app.html w notatniku i uzupełnij tylko jedną linijkę zawierającą <button>dodaj zadanie</button> o następujący kod:

<!-- poprzedni kod HTML -->

<button onclick="addTask()">dodaj zadanie</button>

<!-- kolejny kod HTML -->

Do znacznika <button>, ale także wielu innych znaczników, można dodać atrybut onclick, do którego można przypisać funkcję, która ma być wywołana po kliknięciu w przycisk. Nie jest to najlepszy sposób na dodawanie funkcjonalności do HTMLa, ale nam na razie wystarczy.

Zapisz teraz plik todo-app.html (Ctrl+S), odśwież przeglądarkę, uruchom plik todo-app-dom z poziomu konsoli (zakładka snippets) => Ctrl+Enter lub klikając ikonkę trójkąta, a teraz spróbuj kliknąć w przycisk "Dodaj zadanie".

Jeśli wszystko zrobiłeś/aś dobrze, to w odpowiedzi na kliknięcie przycisku otworzyło się okno dialogowe, możesz wpisać treść zadania, a zostanie ono dodane do localStorage i wyświetli się w przeglądarce!

Nasza aplikacja jest coraz bardziej interaktywna!