質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

787閲覧

完了数 未完了数 をリアルタイムに反映されるようしたい

Kazuki0528

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/01/05 10:36

前提・実現したいこと

完了数、未完了数をリアルタイムに反映したい

イメージ説明

実装している機能

新規に ToDo を追加できる
各アイテムの一覧が閲覧できる
各アイテムの一覧が編集できる
各アイテムを完了済み・未完了にできる
各アイテムを削除できる

コード

index.html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <link 7 href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" 8 rel="stylesheet" 9 /> 10 <link rel="preconnect" href="https://fonts.gstatic.com" /> 11 <link 12 href="https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Roboto:wght@100&display=swap" 13 rel="stylesheet" 14 /> 15 <link rel="stylesheet" href="style.css" /> 16 <title>TODO List</title> 17 </head> 18 <body> 19 <table class="table table-bordered"> 20 <tr> 21 <th>完了済みタスク数</th> 22 <td><span class="completeCount">0</span> 個</td> 23 </tr> 24 <tr> 25 <th>未完了タスク数</th> 26 <td><span class="leftCount">0</span> 個</td> 27 </tr> 28 </table> 29 <h1><span class="styling">TODO</span>List</h1> 30 <div class="input_div"> 31 <input 32 type="text" 33 class="input" 34 placeholder="What Do You Want to Do ..." 35 /> 36 <button class="addButton"> 37 <i class="material-icons">add</i> 38 </button> 39 </div> 40 <div class="container"></div> 41 <script src="main.js"></script> 42 </body> 43</html>

main.js

1const addButton = document.querySelector(".addButton"); 2const input = document.querySelector(".input"); 3const container = document.querySelector(".container"); 4 5class Item { 6 constructor(itemName) { 7 this.createDiv(itemName); 8 } 9 10 createDiv(itemName) { 11 let itemBox = document.createElement("div"); 12 itemBox.classList.add("item"); 13 14 let input = document.createElement("input"); 15 input.value = itemName; 16 input.disabled = true; 17 input.classList.add("item_input"); 18 input.type = "text"; 19 20 let doneButton = document.createElement("button"); 21 doneButton.innerHTML = "DONE"; 22 doneButton.classList.add("doneButton"); 23 24 let editButton = document.createElement("button"); 25 editButton.innerHTML = "EDIT"; 26 editButton.classList.add("editButton"); 27 28 let removeButton = document.createElement("button"); 29 removeButton.innerHTML = "REMOVE"; 30 removeButton.classList.add("removeButton"); 31 32 container.appendChild(itemBox); 33 34 itemBox.appendChild(input); 35 itemBox.appendChild(doneButton); 36 itemBox.appendChild(editButton); 37 itemBox.appendChild(removeButton); 38 39 doneButton.addEventListener("click", () => { 40 input.classList.toggle("done"); 41 }); 42 43 editButton.addEventListener("click", () => this.edit(input)); 44 45 removeButton.addEventListener("click", () => this.remove(itemBox)); 46 } 47 48 edit(input) { 49 input.disabled = !input.disabled; 50 } 51 52 remove(item) { 53 container.removeChild(item); 54 } 55} 56 57function check() { 58 if (input.value != "") { 59 new Item(input.value); 60 input.value = ""; 61 } 62} 63 64addButton.addEventListener("click", check); 65addEventListener("keydown", (e) => { 66 if (e.key == 13) { 67 check(); 68 } 69});

抽象的な質問ですが、ぜひ教えて頂きたいです。
宜しくお願い致しますm(_ _)m

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

完了・未完了を変更する処理の実行時に、更新するだけでは?

投稿2021/01/05 11:28

yambejp

総合スコア114574

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問