質問編集履歴

2022/01/15 03:02

投稿

oil

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,543 +1,270 @@
 ### 前提・実現したいこと
-####ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
+# ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
-#####[完成した物](http://deadline.oilblog.net/)
 ### 発生している問題・エラーメッセージ
-####JavaScriptで、
+#### JavaScriptで、
-####TODOリストにラジオボタンで４つの条件分岐を付けて、
+#### TODOリストにラジオボタンで４つの条件分岐を付けて、
-####４つの<ul>に、appendChild(li);で<li>タグを追加して、
+#### ４つの<ul>に、appendChild(li);で<li>タグを追加して、
-####振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
+#### 振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
-####現状は、document.querySelectorAll("li");で、
+#### 現状は、document.querySelectorAll("li");で、
-####<li>タグがまとめて保存されてしまいます。
+#### <li>タグがまとめて保存されてしまいます。
-####querySelectorAll("li");をどう変えれば良いのか教えて下さい。
+#### querySelectorAll("li");をどう変えれば良いのか教えて下さい。
-####よろしくお願いします。
+#### よろしくお願いします。
 ### 該当のソースコード
 ```JavaScript
 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");
 // ローカルデータ読み込み
 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 = "";
+        input.value = "";
         // ローカルストレージに保存する
-        saveDate();
+        saveDate();
         break;
       case "1":
         ul_1.appendChild(li);
-        input.value = "";
+        input.value = "";
-        saveDate();
+        saveDate();
         break;
       case "2":
         ul_2.appendChild(li);
-        input.value = "";
+        input.value = "";
-        saveDate();
+        saveDate();
         break;
       case "3":
         ul_3.appendChild(li);
-        input.value = "";
+        input.value = "";
-        saveDate();
+        saveDate();
     }
     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 saveDate() {
   const lists = document.querySelectorAll("li");
   // 空の配列を定義
   const todos = [];
   // 配列の全要素に対して反復処理
   lists.forEach((li) => {
     // todosの配列に追加していく処理
     todos.push({
       // 入力された値
       text: li.innerText,
       completed: li.classList.contains("text-decoration-line-through"),
     });
   });
   // jsonでローカルデータ保存
   localStorage.setItem("todos", JSON.stringify(todos));
 }
 // リセットボタン
 const Reset = document.getElementById("Reset");
 Reset.addEventListener("click", function () {
   // 子要素全消去
   all_ul.innerHTML = "";
   window.location.reload();
   saveDate();
 });
 ```
 ```HTML
 <!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">
+          <div class="form-check">
-            <input
+            <input
-              class="form-check-input"
+              class="form-check-input"
-              type="radio"
+              type="radio"
-              name="deadline"
+              name="deadline"
               id="t_t"
               value="0"
               checked
-            />
+            />
             <label class="form-check-label" for="flexRadioDefault2">
               通常業務、通常配送
-            </label>
+            </label>
-          </div>
+          </div>
-          <div class="form-check">
+          <div class="form-check">
-            <input
+            <input
-              class="form-check-input"
+              class="form-check-input"
-              type="radio"
+              type="radio"
-              name="deadline"
+              name="deadline"
               id="t_k"
               value="1"
-            />
+            />
             <label class="form-check-label" for="flexRadioDefault1">
               通常業務、緊急配送
-            </label>
+            </label>
-          </div>
+          </div>
         </div>
         <div class="deadline mt-3">
-          <div class="form-check">
+          <div class="form-check">
-            <input
+            <input
-              class="form-check-input"
+              class="form-check-input"
-              type="radio"
+              type="radio"
-              name="deadline"
+              name="deadline"
               id="j_t"
               value="2"
-            />
+            />
             <label class="form-check-label" for="flexRadioDefault2">
               重要業務、通常配送
-            </label>
+            </label>
-          </div>
+          </div>
-          <div class="form-check">
+          <div class="form-check">
-            <input
+            <input
-              class="form-check-input"
+              class="form-check-input"
-              type="radio"
+              type="radio"
-              name="deadline"
+              name="deadline"
               id="j_k"
               value="3"
-            />
+            />
             <label class="form-check-label" for="flexRadioDefault1">
               重要業務、緊急配送
-            </label>
+            </label>
-          </div>
+          </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>
         <ul class="list-group text-secondary" id="ul_2">
           重要、通常
-        </ul>
+        </ul>
         <ul class="list-group text-secondary" id="ul_1">
           通常、緊急
-        </ul>
+        </ul>
         <ul class="list-group text-secondary" id="ul_0">
           通常、通常
-        </ul>
+        </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 src="todo.js"></script>
   </body>
 </html>
 ```
 ### 試したこと
 追加する<li>タグに.classNameでクラスの追加や、
 querySelectorで、<ul>タグを保存しようとしましたが、
 上手くいきませんでした。
 ### 補足情報（FW/ツールのバージョンなど）
 ここにより詳細な情報を記載してください。

JavaScript

文字サイズ変更、リンク追加

2021/12/23 14:51

投稿

oil

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,7 +2,11 @@
-#ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
+####ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
+#####[完成した物](http://deadline.oilblog.net/)

markdown記法を使ってみた

2021/12/23 14:51

投稿

oil

スコア11

test CHANGED Viewed

	@@ -1 +1 @@
1	- 条件分岐で~~、４つの~~<ul~~>に、appendCh~~i~~ld(li);で<li~~>タグ~~を追加~~し~~て、振り分け~~をした~~状態のままの保存方法がどうすれば良~~い~~のか分かりません~~。
1	+ ブラウザをリロードすると、条件分岐で振り分けた<li>タグが、1箇所にまとまってしまうのを直したい。

test CHANGED Viewed

@@ -2,7 +2,7 @@
-ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
+#ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。
@@ -10,37 +10,505 @@
+####JavaScriptで、
+####TODOリストにラジオボタンで４つの条件分岐を付けて、
+####４つの<ul>に、appendChild(li);で<li>タグを追加して、
+####振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
+####現状は、document.querySelectorAll("li");で、
+####<li>タグがまとめて保存されてしまいます。
+####querySelectorAll("li");をどう変えれば良いのか教えて下さい。
+####よろしくお願いします。
+### 該当のソースコード
+```JavaScript
+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");
+// ローカルデータ読み込み
+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 = "";
+        // ローカルストレージに保存する
+        saveDate();
+        break;
+      case "1":
+        ul_1.appendChild(li);
+        input.value = "";
+        saveDate();
+        break;
+      case "2":
+        ul_2.appendChild(li);
+        input.value = "";
+        saveDate();
+        break;
+      case "3":
+        ul_3.appendChild(li);
+        input.value = "";
+        saveDate();
+    }
+    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 saveDate() {
+  const lists = document.querySelectorAll("li");
+  // 空の配列を定義
+  const todos = [];
+  // 配列の全要素に対して反復処理
+  lists.forEach((li) => {
+    // todosの配列に追加していく処理
+    todos.push({
+      // 入力された値
+      text: li.innerText,
+      completed: li.classList.contains("text-decoration-line-through"),
+    });
+  });
+  // jsonでローカルデータ保存
+  localStorage.setItem("todos", JSON.stringify(todos));
+}
+// リセットボタン
+const Reset = document.getElementById("Reset");
+Reset.addEventListener("click", function () {
+  // 子要素全消去
+  all_ul.innerHTML = "";
+  window.location.reload();
+  saveDate();
+});
 ```
-JavaScriptで、
-TODOリストにラジオボタンで４つの条件分岐を付けて、
-４つの<ul>に、appendChild(li);で<li>タグを追加して、
-振り分けをした状態のままの保存方法がどうすれば良いのか分かりません。
-現状は、document.querySelectorAll("li");で、
-<li>タグがまとめて保存されてしまいます。
-querySelectorAll("li");をどう変えれば良いのか教えて下さい。
-よろしくお願いします。
+```HTML
+<!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 src="todo.js"></script>
+  </body>
+</html>
@@ -48,476 +516,6 @@
-### 該当のソースコード
-```JavaScript
-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");
-// ローカルデータ読み込み
-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 = "";
-        // ローカルストレージに保存する
-        saveDate();
-        break;
-      case "1":
-        ul_1.appendChild(li);
-        input.value = "";
-        saveDate();
-        break;
-      case "2":
-        ul_2.appendChild(li);
-        input.value = "";
-        saveDate();
-        break;
-      case "3":
-        ul_3.appendChild(li);
-        input.value = "";
-        saveDate();
-    }
-    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 saveDate() {
-  const lists = document.querySelectorAll("li");
-  // 空の配列を定義
-  const todos = [];
-  // 配列の全要素に対して反復処理
-  lists.forEach((li) => {
-    // todosの配列に追加していく処理
-    todos.push({
-      // 入力された値
-      text: li.innerText,
-      completed: li.classList.contains("text-decoration-line-through"),
-    });
-  });
-  // jsonでローカルデータ保存
-  localStorage.setItem("todos", JSON.stringify(todos));
-}
-// リセットボタン
-const Reset = document.getElementById("Reset");
-Reset.addEventListener("click", function () {
-  // 子要素全消去
-  all_ul.innerHTML = "";
-  window.location.reload();
-  saveDate();
-});
-```
-```HTML
-<!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 src="todo.js"></script>
-  </body>
-</html>
-```
 ### 試したこと

前提・実現したいことの記入漏れを修正

2021/12/23 14:44

投稿

oil

スコア11

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,11 +2,7 @@
-ここに質問の内容を詳しく書いてください。
-（例）PHP(CakePHP)で●●なシステムを作っています。
-■■な機能を実装中に以下のエラーメッセージが発生しました。
+ブラウザをリロードすると、振り分けた<li>タグが１っ箇所にまとまってしまうのを直したい。