編集履歴

質問編集履歴

2020/07/28 03:10

投稿

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~Todoアプリを作成しております。~~idがついて~~いるdivタグを削除したいのです。~~
1	+ javaとjavascriptについて

test CHANGED Viewed

File without changes

2020/07/28 03:10

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,395 +1,7 @@
-### 前提・実現したいこと
+ああああああああああああああ
-JavaScript初心者です。
+あああああああああああああ
-Todoアプリを作成しておりますが、プログラムで行き詰まってしまい
+ああああああああああああああ
-質問させていただきます。
+ああああああああああああ
-実現したいこと
-・Todoのタスクの内容が全部なくなった時に、○月○日にやりたいことを削除する。
-→カレンダー要素のIDがついたdivタグを削除したい
-```ここに言語を入力
-    if (document.getElementsByName("name").length === 0) {
-    }
-```
-こちらの条件式の中で、その処理を行いたいのですが
-思いつかずに悩んでおります。
-### 該当のソースコード
-//ボタン押下時
-```ここに言語を入力
-let object = {};
-//objectの長さを確認する
-//checkboxが押されたらobjectの数を1個減らす
-document.getElementById("restTodo").innerHTML = "残りのToDoList";
-let icon = document.getElementById("icon");
-//アイコンの値を保持する
-let displayOriginal = icon.style.display;
-icon.style.display = "none";
-function submit() {
-  let calendarElement = document.getElementById("datepicker").value;
-  const listTodo = document.getElementById("item").value;
-  //オブジェクトにtodoを追加する
-  let createFlag = false;
-  if (calendarElement in object) {
-    object[calendarElement].push(listTodo);
-  } else {
-    createFlag = true;
-    object[calendarElement] = [listTodo];
-  }
-  //文字数を入力する
-  let remaining = 30;
-  let listLength = Number(listTodo.length);
-  if (listTodo === "") {
-    window.alert("予定を入れてください");
-    return;
-  }
-  if (listLength >= remaining) {
-    window.alert("文字数を超えています");
-    return;
-  }
-  //todolist<div>作成
-  let todolists;
-  if (createFlag) {
-    let element = document.createElement("div");
-    element.setAttribute("id", calendarElement);
-    let p = document.createElement("p");
-    p.textContent = calendarElement + "にすること";
-    document.getElementById("output").appendChild(element);
-    element.appendChild(p);
-    todolists = document.createElement("ul");
-    element.appendChild(todolists);
-  } else {
-    let element = document.getElementById(calendarElement);
-    let elementChildren = element.children;
-    for (let i = 0; i < elementChildren.length; i++) {
-      if (elementChildren[i].tagName === "UL") {
-        todolists = elementChildren[i];
-        break;
-      }
-    }
-  }
-  let li = document.createElement("li");
-  li.textContent = listTodo;
-  todolists.appendChild(li);
-  //削除ボタンを追加する
-  let removeButton = document.createElement("button");
-  button.display = "none";
-  removeButton.innerHTML = '<i class="fas fa-trash"></i>';
-  li.appendChild(removeButton);
-  const removeTodo = (removeButton) => {
-    let targetTodo = removeButton.closest("li");
-    todolists.removeChild(targetTodo);
-    delete object[calendarElement];
-    let el = document.getElementById("li");
-    let div = el.closest("div");
-    console.log(div);
-    if (document.getElementsByName("name").length === 0) {
-    }
-  };
-  removeButton.addEventListener("click", () => removeTodo(removeButton), false);
-  // checkboxを追加する;
-  let check = document.createElement("input");
-  check.setAttribute("type", "checkbox");
-  check.setAttribute("name", "name");
-  check.setAttribute("id", "box");
-  li.appendChild(check);
-  //checkboxを追加
-  $(":checkbox").click(function () {
-    if ($(this).is(":checked")) {
-      $(this).closest("li").css("text-decoration", "line-through");
-    } else {
-      $(this).closest("li").css("text-decoration", "none");
-    }
-  });
-}
-//クリア機能を使ってあげる
-function clear() {
-  let text = document.getElementById("item");
-  text.value = "";
-}
-function completeDetele() {
-  window.alert("復元できませんがよろしいですか？");
-  let divCalendar = document.getElementById(calendarElement);
-  document.getElementById("output").removeChild(divCalendar);
-  document.getElementById("checked.box").removeChild("");
-}
-```
-```
-<html>
-  <head>
-    <link
-      rel="stylesheet"
-      href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"
-    />
-    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
-    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
-    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
-    <link rel="stylesheet" href="main.css" />
-    <script>
-      $(function () {
-        $("#datepicker").datepicker();
-        $("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
-      });
-    </script>
-  </head>
-  <body>
-    <h1 class="headerTitle">TODO APP</h1>
-    <div id="container">
-    日付<span class="important">※必須</span>
-    <input
-      type="text"
-      id="datepicker"
-      placeholder="日付を選択してください"
-    />
-    内容
-    <span class="important">※必須</span>
-    <input type="text" id="item" placeholder="30文字まで入力できます" />
-    <button type="button" id="button" onclick="submit()">追加</button>
-    <button type="button" id="clearButton" onclick="clear()">クリア</button>
-   <div id="custom_high"><input type="checkbox" name="priority" />High</div>
-   <div id="custom_middle"><input type="checkbox" name="priority" />Middle</div>
-   <div id="custom_low"><input type="checkbox" name="priority" />Low</div>
-    <tr>
-      <th>残りタスク</th>
-      <td><span　class="restTodo">0</span>個</td>
-    </tr>
-    <tr>
-      <th>完了率</th>
-      <td><span class="completeRate">0</span>%</td>
-    </tr>
-    <button type="button" id="completeDelete" onclick="completeDetele()">全部削除</button>
-    <p id="restTodo"></p>
-    <p id="output"></p>
-    <form name="form">
-  <i class="fas fa-trash" id="icon"></i>
-     </form>
-    </div>
-    <script src="main.js"></script>
-  </body>
-</html>
-```
-### 試したこと
-checkboxの個数が0になったときに、カレンダー要素のIDがついたdivタグを削除したい
-拙い文章で申し訳ございません。また、こういった質問サイトに投稿する際は、こういう書き方(?)で
-大丈夫なのでしょうか....。不躾で申し訳ありません。よろしくお願い致します。

htmlのソースと本文タイトルを変更しました。

2020/07/28 03:08

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- Todoアプリを作成しております。
1	+ Todoアプリを作成しております。idがついているdivタグを削除したいのです。

test CHANGED Viewed

@@ -1,7 +1,5 @@
 ### 前提・実現したいこと
-お世話になってます。初めて投稿させていただきます。
 JavaScript初心者です。
 Todoアプリを作成しておりますが、プログラムで行き詰まってしまい
@@ -266,6 +264,128 @@
+```
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"
+    />
+    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
+    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
+    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
+    <link rel="stylesheet" href="main.css" />
+    <script>
+      $(function () {
+        $("#datepicker").datepicker();
+        $("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd");
+      });
+    </script>
+  </head>
+  <body>
+    <h1 class="headerTitle">TODO APP</h1>
+    <div id="container">
+    日付<span class="important">※必須</span>
+    <input
+      type="text"
+      id="datepicker"
+      placeholder="日付を選択してください"
+    />
+    内容
+    <span class="important">※必須</span>
+    <input type="text" id="item" placeholder="30文字まで入力できます" />
+    <button type="button" id="button" onclick="submit()">追加</button>
+    <button type="button" id="clearButton" onclick="clear()">クリア</button>
+   <div id="custom_high"><input type="checkbox" name="priority" />High</div>
+   <div id="custom_middle"><input type="checkbox" name="priority" />Middle</div>
+   <div id="custom_low"><input type="checkbox" name="priority" />Low</div>
+    <tr>
+      <th>残りタスク</th>
+      <td><span　class="restTodo">0</span>個</td>
+    </tr>
+    <tr>
+      <th>完了率</th>
+      <td><span class="completeRate">0</span>%</td>
+    </tr>
+    <button type="button" id="completeDelete" onclick="completeDetele()">全部削除</button>
+    <p id="restTodo"></p>
+    <p id="output"></p>
+    <form name="form">
+  <i class="fas fa-trash" id="icon"></i>
+     </form>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
+```
 ### 試したこと
 checkboxの個数が0になったときに、カレンダー要素のIDがついたdivタグを削除したい

タイトル、コードを囲い修正しました

2020/07/25 04:18

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~JavaScript初心者です。~~Todoアプリを作成しております。
1	+ Todoアプリを作成しております。

test CHANGED Viewed

@@ -40,6 +40,8 @@
 //ボタン押下時
+```ここに言語を入力
 let object = {};
 //objectの長さを確認する
@@ -260,6 +262,8 @@
+```
 ### 試したこと