回答編集履歴

テスト用のものを掲載しました。

2021/12/19 05:19

投稿

babu_babu_baboo

スコア616

test CHANGED Viewed

@@ -99,3 +99,543 @@
 ```
+＞出来ませんでした
+危うく消すところでした。
+テストに使ったコードです。
+関数 add が機能を兼用しているのがダメですよ
+```html&js
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
+      crossorigin="anonymous"
+    />
+    <title>条件分岐の練習</title>
+  </head>
+  <body class="bg-light">
+    <div class="container w-100">
+      <h1 class="text-center text-info my-4">納期管理アプリ</h1>
+      <form id="all_radio">
+        <div class="responsibility">
+          <div class="form-check">
+            <input
+              class="form-check-input"
+              type="radio"
+              name="deadline"
+              id="t_t"
+              value="0"
+              checked
+            />
+            <label class="form-check-label" for="flexRadioDefault2">
+              通常業務、通常配送
+            </label>
+          </div>
+          <div class="form-check">
+            <input
+              class="form-check-input"
+              type="radio"
+              name="deadline"
+              id="t_k"
+              value="1"
+            />
+            <label class="form-check-label" for="flexRadioDefault1">
+              通常業務、緊急配送
+            </label>
+          </div>
+        </div>
+        <div class="deadline mt-3">
+          <div class="form-check">
+            <input
+              class="form-check-input"
+              type="radio"
+              name="deadline"
+              id="j_t"
+              value="2"
+            />
+            <label class="form-check-label" for="flexRadioDefault2">
+              重要業務、通常配送
+            </label>
+          </div>
+          <div class="form-check">
+            <input
+              class="form-check-input"
+              type="radio"
+              name="deadline"
+              id="j_k"
+              value="3"
+            />
+            <label class="form-check-label" for="flexRadioDefault1">
+              重要業務、緊急配送
+            </label>
+          </div>
+        </div>
+      </form>
+      <form id="form" class="mt-2 mb-5">
+        <input
+          id="input"
+          class="form-control"
+          placeholder="納期、送り先を入力"
+          autocomplete="off"
+        />
+      </form>
+      <div id="all_ul" class="f-container">
+        <ul class="list-group text-secondary" id="ul_3">
+          重要、緊急
+        </ul>
+        <ul class="list-group text-secondary" id="ul_2">
+          重要、通常
+        </ul>
+        <ul class="list-group text-secondary" id="ul_1">
+          通常、緊急
+        </ul>
+        <ul class="list-group text-secondary" id="ul_0">
+          通常、通常
+        </ul>
+      </div>
+    </div>
+    <!-- Resetボタン -->
+    <div class="d-grid gap-2 col-1 mx-auto pt-5">
+      <button id="Reset" class="btn btn-primary" type="button">Reset</button>
+    </div>
+    <script>
+const form = document.getElementById("form");
+const input = document.getElementById("input");
+const ul_0 = document.getElementById("ul_0");
+const ul_1 = document.getElementById("ul_1");
+const ul_2 = document.getElementById("ul_2");
+const ul_3 = document.getElementById("ul_3");
+const all_radio = document.getElementById("all_radio");
+loadData ();
+// ローカルデータ読み込み
+/*
+let todos = JSON.parse(localStorage.getItem("todos"));
+if (todos) {
+  // 配列の全要素に対して反復処理
+  todos.forEach((todo) => {
+    add(todo);
+  });
+}
+*/
+// フォームがエンター(submit)された時処理
+form.addEventListener("submit", function (event) {
+  // デフォルトのイベント中止（エンター後のリロード）
+  event.preventDefault();
+  // 下記の関数submit後に行いたい処理
+  add();
+});
+function add(todo) {
+  // フォームに入力された値を取る
+  let todoText = input.value;
+  if (todo) {
+    todoText = todo.text;
+  }
+  // フォームが空の状態でのliタグの追加を防ぐ
+  if (todoText.length > 0) {
+    // liタグの作成
+    const li = document.createElement("li");
+    // liにフォームに入力された値を入れる
+    li.innerText = todoText;
+    // liタグにlist-group-itemクラスの追加、デザインの為
+    li.classList.add("list-group-item");
+    // ラジオボタンの選択された値
+    let radioNodeList = all_radio.deadline;
+    let radiobtn = radioNodeList.value;
+    switch (radiobtn) {
+      case "0":
+        // ul_0の子要素として追加する
+        ul_0.appendChild(li);
+        // フォームを空にする
+        input.value = "";
+        // ローカルストレージに保存する
+        saveData();
+        break;
+      case "1":
+        ul_1.appendChild(li);
+        input.value = "";
+        saveData();
+        break;
+      case "2":
+        ul_2.appendChild(li);
+        input.value = "";
+        saveData();
+        break;
+      case "3":
+        ul_3.appendChild(li);
+        input.value = "";
+        saveData();
+    }
+    if (todo && todo.completed) {
+      li.classList.add("text-decoration-line-through");
+    }
+    li.addEventListener("contextmenu", function (event) {
+      // 右クリックイベントブロック
+      event.preventDefault();
+      li.remove();
+      saveDate();
+    });
+    li.addEventListener("click", function () {
+      li.classList.toggle("text-decoration-line-through");
+      saveDate();
+    });
+  }
+}
+// li要素を取得して、配列としてまとめておく
+function saveData() {
+  const lists = document.querySelectorAll("li");
+  // 空の配列を定義
+  const todos = { };
+  // 配列の全要素に対して反復処理
+  lists.forEach((li) => {
+    // todosの配列に追加していく処理
+    let parent = li.parentNode, id = parent.id;
+		if (id) {
+			if (! todos[id])
+			  todos[id] = [ ];
+			todos[id].push ({
+				// 入力された値
+				text: li.innerText,
+				completed: li.classList.contains("text-decoration-line-through"),
+			});
+		}
+  });
+  // jsonでローカルデータ保存
+  localStorage.setItem("todos", JSON.stringify(todos));
+}
+function loadData () {
+	let todos = JSON.parse(localStorage.getItem("todos"));
+	if (! todos)
+	  return;
+	let LI = document.createElement ('li');
+	LI.classList.add ("list-group-item");
+	for (let [id, group] of Object.entries (todos)) {
+		let ul = document.getElementById (id);
+		if (ul){
+			for (let {text, completed} of group) {
+				let li = LI.cloneNode (false);
+				li.textContent = text;
+				if (completed)
+				  li.classList.add("text-decoration-line-through");
+				ul.appendChild (li);
+			}
+		}
+	}
+}
+// リセットボタン
+const Reset = document.getElementById("Reset");
+Reset.addEventListener("click", function () {
+  // 子要素全消去
+  all_ul.innerHTML = "";
+  window.location.reload();
+  saveDate();
+});
+input.addEventListener ('change', function () {
+	add();
+}, false);
+		</script>
+  </body>
+</html>
+```