実現したいこと
ここに実現したいことを箇条書きで書いてください。
前提
ここに質問の内容を詳しく書いてください。
（例）
todoリストを作成しています。
完了リストから戻るボタンを使用して未完了リストに移動させたいのですが、移動せずに消えてしまう状況です。
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
エラーはでていません。
エラーメッセージ
該当のソースコード
HTML ソースコード ```<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="src/base.css"> <title>lesson08 Todoリスト</title> </head> <body> <!-- 入力エリア --> <div class="input-area"> <input id="add-text" placeholder="Todoを入力" /> <button id="add-button">追加</button> </div><!-- input-area --> <div class="container"> <!-- 作業中エリア --> <div class="incomp-area"> <p class="area-title">タスク</p> <ul id="incomp-area-list"> </ul> </div><!-- incomp-area --> <!-- 完了エリア --> <div class="comp-area"> <p class="area-title">完了</p> <ul id="comp-area-list"> </ul> </div><!-- comp-area --> </div><!-- container --> <script src="src/index.js"> Javascript const onClickAdd = () => { //inputTextを定義して取得した値を入れる。 //取得したいのはvalueなので、.valueとする const inputText = document.getElementById("add-text").value; //add-textを持っているvalueがinputTextに格納される //値が渡されてボタンクリック後にフォームの中を空にする document.getElementById("add-text").value = ""; //DOMの生成はcreateElement関数を使う const div = document.createElement("div"); //divを生成し、divという変数で定義する //ボタンクリックでdivタグを取得できる div.className = "list-row"; //document.createElementを使ってHTMLのDOMを生成して差し込んでいく const li = document.createElement("li"); //中身に要素を格納したいときは、innerTextを使う //liタグを生成してinputTextの値を格納して、入力された値が入った状態で出力する li.innerText = inputText; //完了ボタン作成 const compeleteButton = document.createElement("button"); compeleteButton.innerText = "完了"; //完了機能 compeleteButton.addEventListener("click", () => { const deleteFromIncompleteList = compeleteButton.parentNode; //完了リストに追加する要素 const addTarget = compeleteButton.parentNode; const text = addTarget.firstElementChild.innerText; addTarget.textContent = null; const li =document.createElement("li"); li.innerText = text; //戻すボタン作成。実装 const backButton = document.createElement("button"); backButton.innerText = "戻す"; backButton.addEventListener("click", () => { const deleteTarget = backButton.parentNode; document.getElementById("comp-area-list").removeChild(deleteTarget); const text = backButton.parentNode.firstElementChild.innerText; }); addTarget.appendChild(li); addTarget.appendChild(backButton); document.getElementById("comp-area-list").appendChild(addTarget); }); //削除ボタン作成 const deleteButton = document.createElement("button"); deleteButton.innerText = "削除"; // 削除機能 deleteButton.addEventListener("click", () => { const deleteTarget = deleteButton.parentNode; document.getElementById("incomp-area-list").removeChild(deleteTarget); }); // HTMLの階層を生成 div.appendChild(li); div.appendChild(compeleteButton); div.appendChild(deleteButton); //idをつけてdivを取得して要素を切り替える document.getElementById("incomp-area-list").appendChild(div); console.log(div); }; //idに対してクリックイベントを追加 document.getElementById("add-button") //追加ボタンを押したときに関数を実行 .addEventListener("click", () => onClickAdd()); ### 試したこと 完了リストに追加する要素が当てはまるかと思い、試してみたが反映しなかった ここに問題に対して試したことを記載してください。 ### 補足情報（FW/ツールのバージョンなど） ここにより詳細な情報を記載してください。
0 コメント