prompt

Author: aster-void

docs/2-browser-apps/06-project/_samples/step3/script.js

@@ -11,17 +11,7 @@ addButton.onclick = () => {
   todoInput.value = "";
   editButton.textContent = "編集";
   editButton.onclick = () => {
-    const input = document.createElement("input");
-    const confirmButton = document.createElement("button");
-    input.value = todoText.textContent;
-    confirmButton.textContent = "確定";
-    confirmButton.onclick = () => {
-      todoText.textContent = input.value;
-      todoItem.replaceChild(todoText, input);
-      todoItem.replaceChild(editButton, confirmButton);
-    };
-    todoItem.replaceChild(input, todoText);
-    todoItem.replaceChild(confirmButton, editButton);
+    todoText.textContent = prompt("編集内容を入力してください");
   };
   deleteButton.textContent = "削除";
   deleteButton.onclick = () => {
@@ -31,4 +21,4 @@ addButton.onclick = () => {
   todoItem.appendChild(editButton);
   todoItem.appendChild(deleteButton);
   todoList.appendChild(todoItem);
-};
+};

docs/2-browser-apps/06-project/_samples/todo/script.js

@@ -1,12 +1,10 @@
 const todoList = document.getElementById("todo-list");
 const todoInput = document.getElementById("todo-input");
 const addButton = document.getElementById("add-button");
-todoInput.oninput = () => {
-  addButton.disabled = todoInput.value === "";
-};
+
+todoInput.oninput = () => (addButton.disabled = todoInput === "");
 
 addButton.onclick = () => {
-  addButton.disabled = true;
   const todoItem = document.createElement("li");
   const todoText = document.createElement("span");
   const editButton = document.createElement("button");
@@ -15,20 +13,8 @@ addButton.onclick = () => {
   todoInput.value = "";
   editButton.textContent = "編集";
   editButton.onclick = () => {
-    const input = document.createElement("input");
-    const confirmButton = document.createElement("button");
-    input.value = todoText.textContent;
-    input.oninput = () => {
-      confirmButton.disabled = input.value === "";
-    };
-    confirmButton.textContent = "確定";
-    confirmButton.onclick = () => {
-      todoText.textContent = input.value;
-      todoItem.replaceChild(todoText, input);
-      todoItem.replaceChild(editButton, confirmButton);
-    };
-    todoItem.replaceChild(input, todoText);
-    todoItem.replaceChild(confirmButton, editButton);
+    const input = prompt("編集内容を入力してください");
+    if (input !== "") todoText.textContent = input;
   };
   deleteButton.textContent = "削除";
   deleteButton.onclick = () => {
@@ -38,4 +24,4 @@ addButton.onclick = () => {
   todoItem.appendChild(editButton);
   todoItem.appendChild(deleteButton);
   todoList.appendChild(todoItem);
-};
+};

docs/2-browser-apps/06-project/index.mdx

@@ -220,17 +220,7 @@ addButton.onclick = () => {
   todoInput.value = "";
   editButton.textContent = "編集";
   editButton.onclick = () => {
-    const input = document.createElement("input");
-    const confirmButton = document.createElement("button");
-    input.value = todoText.textContent;
-    confirmButton.textContent = "確定";
-    confirmButton.onclick = () => {
-      todoText.textContent = input.value;
-      todoItem.replaceChild(todoText, input);
-      todoItem.replaceChild(editButton, confirmButton);
-    };
-    todoItem.replaceChild(input, todoText);
-    todoItem.replaceChild(confirmButton, editButton);
+    todoText.textContent = prompt("編集内容を入力してください");
   };
   deleteButton.textContent = "削除";
   deleteButton.onclick = () => {
@@ -285,12 +275,10 @@ todoInput.oninput = () => {
 const todoList = document.getElementById("todo-list");
 const todoInput = document.getElementById("todo-input");
 const addButton = document.getElementById("add-button");
-todoInput.oninput = () => {
-  addButton.disabled = todoInput.value === "";
-};
+
+todoInput.oninput = () => (addButton.disabled = todoInput === "");
 
 addButton.onclick = () => {
-  addButton.disabled = true;
   const todoItem = document.createElement("li");
   const todoText = document.createElement("span");
   const editButton = document.createElement("button");
@@ -299,20 +287,8 @@ addButton.onclick = () => {
   todoInput.value = "";
   editButton.textContent = "編集";
   editButton.onclick = () => {
-    const input = document.createElement("input");
-    const confirmButton = document.createElement("button");
-    input.value = todoText.textContent;
-    input.oninput = () => {
-      confirmButton.disabled = input.value === "";
-    };
-    confirmButton.textContent = "確定";
-    confirmButton.onclick = () => {
-      todoText.textContent = input.value;
-      todoItem.replaceChild(todoText, input);
-      todoItem.replaceChild(editButton, confirmButton);
-    };
-    todoItem.replaceChild(input, todoText);
-    todoItem.replaceChild(confirmButton, editButton);
+    const input = prompt("編集内容を入力してください");
+    if (input !== "") todoText.textContent = input;
   };
   deleteButton.textContent = "削除";
   deleteButton.onclick = () => {