DOM操作の情報が多すぎて何か最善かわからないまま、
つぎはぎの知識で何とか完成しました。
もう少し勉強したらReactを学びたいと思います。
至らぬところが多いので、ご意見や改善案をいただけますと幸いです。
何かいい教材がありましたら教えてください。
horyuMemo.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>memo</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<div>
<input id="addText" placeholder="やることを入力"/>
<button id="addButton"> 追加</button>
</div>
<div>
<p>メモ</p>
<ul id="todoList">
<div>
<li>やることリスト</li>
<div>
</ul>
</div>
<div>
<p>保留中</p>
<ul id="pendList">
<div>
<li>保留中リスト
</li>
<div>
</ul>
</div>
<script>
//自作関数（on_click_add)呼び出しは末尾
//ボタンクリック時に各タグを生成する。
const onClick =()=>{
//addTextの要素のvalueをinput_textに代入
const inputText = document
.getElementById("addText").value;
//入力欄を削除
document.getElementById("addText").value="";
createtodoleteList(inputText);
};//on_click_add関数の終わり
//自作関数dellist要素を削除する
//引数(target)は要素.parentNode（delbutとpendbut)
const dellist =(target)=>{
// removeChild=因数に指定したノードを削除する
document.getElementById("todoList").removeChild(target);
};
//未完了リストに追加する関数
const createtodoleteList=(text)=>{
//divタグ生成
//createElementは新たにhtml要素を追加する。(div,li等)
const div =document.createElement("div");
div.className ="listRow";
//liタグ生成
const li =document.createElement("li");
//liタグにtextを代入
li.innerText = text;
//ボタンタグの生成（完了ボタンの生成）
//pendbut=pend_Button:完了ボタンの変数
//createElementでpendbutのボタン要素を追加
const pendbut = document.createElement("button");
//innetText関数でボタンに文字（保留）を埋め込む。
pendbut.innerText ="保留に回す";
//自作関数（関数名なし＝pendbutが押されたら）
//addEventListener＝イベント時に関数を実行する関数
pendbut.addEventListener("click", ()=>{
//押された完了ボタン（pendbut)の親ノード（DIV）
//を未完了リストから削除
//dellistは自作関数
//pendbutを消す
dellist(pendbut.parentNode);
//完了ボタンのテキストを取得
//addTargetは変数
//parentNodeは指定した子ノードの親ノードを取得
//子ノードpendbut
const addTarget = pendbut.parentNode;
//firstElementChild=最初の子要素を追加する。
//最初の子要素のテキストをtextに代入する
const text =addTarget.firstElementChild.innerText;
//DIV以下を初期化
//textContent関数でnullにする。
addTarget.textContent = null;
//タグ生成
//createElementで新規html要素生成
const li = document.createElement("li");
//liタグにtextを代入（innnerText関数使用）
li.innerText = text;
//ボタンタグ生成
//変数backButton
const backButton = document.createElement("button");
//バックボタンのテキストに戻すを代入する
backButton.innerText ="やることリストに戻す";
//自作関数（関数名なし＝backButtonが押されたら）
//addEventListener＝イベント時に関数を実行
backButton.addEventListener("click", ()=>{
//押された戻すボタンの親タグ(div)を完了リストから削除
const delTarget = backButton.parentNode;
document.getElementById("pendList")
.removeChild(delTarget);
const text = backButton.parentNode.
firstElementChild.innerText;
createtodoleteList(text);
});//pendbutクリック関数終わり
//divタグの子要素に各要素を設定
addTarget.appendChild(li);
addTarget.appendChild(backButton);
//完了リストに追加
document.getElementById("pendList")
.appendChild(addTarget);
});
//削除ボタンタグの作成
//delbutというボタンタグのをクリエイトエレメント生成
const delbut = document.createElement("button");
//delbutの文字を完了・削除とする
delbut.innerText ="完了・削除";
//自作関数（関数名なし＝delbutが押されたら）
//addEventListener＝イベント時に関数を実行
delbut.addEventListener("click", ()=>{
//押された削除ボタンを機能させる
//dellist=自作関数
//delbut.parentNodeを削除
dellist(delbut.parentNode);
});//delbutクリック関数終わり
//divタグの子要素に各要素を設定
//appendChild子ノードの最後にノードを追加
div.appendChild(li);
div.appendChild(pendbut);
div.appendChild(delbut);
//未完了のリストに追加
//todolistは未完成のTODOのID
document.getElementById("todoList")
.appendChild(div);
};
//関数onClickを使用
//addEventListener＝イベント時に関数を実行
document.getElementById("addButton")
.addEventListener("click", () => onClick());
</script>
</body>
</html>