From c2010d69c6abeebb074f5294db51d69b77a0a3a6 Mon Sep 17 00:00:00 2001 From: Minhao Qiu <minhao.qiu@fau.de> Date: Mon, 29 Jul 2019 21:37:49 +0200 Subject: [PATCH] improve the robustness of task.htmk --- app_7/task.html | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/app_7/task.html b/app_7/task.html index fc8d368..62ffd95 100644 --- a/app_7/task.html +++ b/app_7/task.html @@ -2,10 +2,21 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <title>Title</title> + <title>Todo List</title> <script> document.addEventListener("DOMContentLoaded", () => { + // By default, submit button is disabled + document.querySelector("#submit").disabled = true; + + // Enable the button only if there is text in the input field + document.querySelector("#task").onkeyup = () => { + if (document.querySelector('#task').value.length > 0) + document.querySelector("#submit").disabled = false; + else + document.querySelector("#submit").disabled = true; + }; + document.querySelector("#new-task").onsubmit = () => { const li = document.createElement("li"); @@ -14,8 +25,9 @@ // add new item to the task list document.querySelector("#tasks").append(li); - // clear the input field + // clear the input field and disabled button again document.querySelector("#task").value = ""; + document.querySelector("#submit").disabled = true; // stop form from submitting return false; @@ -30,7 +42,7 @@ </ul> <form id="new-task"> <input id="task" autocomplete="off" autofocus placeholder="New Task" type="text"> - <input type="submit"> + <input id="submit" type="submit"> </form> </body> </html> \ No newline at end of file -- GitLab