jsプログラミングのアイデア

1. 入力イベントをリッスンし、キーとキーをマッチさせ、対応する値を見つけます。それを変数に格納し、変数の値を追加するオブジェクトを作成し、関数内のオブジェクトをグローバルtodoList配列に追加し、呼び出しをレンダリングします。

 inputDom.onkeydown = function (event) {
 if (event.key === "Enter") {
 // 入力ボックスの内容を取得する
 var value = inputDom.value
 var objItem = {
 content: value,
 isDone: false
 }
 todoList.push(objItem)
 // オブジェクトを作成し、todoList配列に追加する。
 console.log(event)
 render(todoList)
 // レンダー関数を呼び出す
 }
 }

1. 入力イベントの後にリストを作成するメソッドを書いてください。

 // todoListオブジェクトをパラメータとしてWebページをレンダリングする。
 function render(todoList) {
 localStorage.todoList = JSON.stringify(todoList)
 // ローカル保存用にオブジェクトをjson形式に変換する。
 doingListDiv.innerHTML = " "
 doneListDiv.innerHTML = " "
 // 空のリスト要素
 console.log(1)
 todoList.forEach(function (item, index) {
 	//itemリストオブジェクト、ソートされた番号のリストのインデックス
 var todoItem = document.createElement("div")
 todoItem.className = "todoItem"
 if (item.isDone) {
 //isDone属性の値がfalseの場合、html要素の実装後にtrueに修正する。
 todoItem.innerHTML = `<input type="checkbox" checked="checked" data-index="${index}">
 <div class="content">`+ item.content + `</div>
 <div class="del" data-index="${index}"> </div>`
 doneListDiv.appendChild(todoItem)
 } else {
 //項目が作成されたばかりの場合、isDone属性の値はfalseとなり、作成された要素のノードがhtml構造体に追加される。
 todoItem.innerHTML = `<input type="checkbox" data-index="${index}">
 <div class="content">`+ item.content + `</div>
 <div class="del" data-index="${index}"> </div>`
 doingListDiv.appendChild(todoItem)
 }
 });
 }

1. 入力要素の状態が変更されたときに実行される関数 --- onchange.

doingListDiv.onchange = function (e) {
//doingList要素のバインディングイベントを取得する。
 console.log(e)
 // cssカスタム属性を使ってインデックス値をマークし、todoListの添え字を修正し、対応するリストを修正する。true==に変換する)
 var index = parseInt(e.target.dataset.index)
 console.log(index)
 todoList[index].isDone = true
 render(todoList)
 }
 // cssカスタム属性を使ってインデックス値をマークし、todoListの添え字を修正し、対応するリストを修正する。false==に変換する)
 doneListDiv.onchange = function (e) {
 console.log(e)
 var index = parseInt(e.target.dataset.index)
 console.log(index)
 todoList[index].isDone = false
 render(todoList)
 }

1. 削除ボタン結合イベント、親要素へのイベントプロキシ main

 mainDiv.onclick = function (e) {
 if (e.target.className == "del") {
 //del要素というクラスのイベントオブジェクトを判定し、イベント処理を行う
 console.log(e)
 var index = parseInt(e.target.dataset.index)
 todoList.splice(index, 1)
 render(todoList)
 }
 }

1. 関数eは出力の内容を表示します。

Event {isTrusted: true, type: "change", target: input, currentTarget: div.list, eventPhase: 3,  }
bubbles: true
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
isTrusted: true
path: (9) [input, div.todoItem, div.list, div.todo.doing, div.main, body, html.iphone.lt640.lt960.lt1200, document, Window]
returnValue: true
srcElement: input
target: input
timeStamp: 
type: "change"
__proto__: Event

1. ローカルストレージ、TodoListオブジェクト変換文字列フォーマット

localStorage.todoList = JSON.stringify(todoList)