ToDoリスト
概要
JSでToDoリストを作成しました。
inputに入力された値を読み取り、HTMLに反映。
完了タスクを削除するまでが一連の流れとなります。
HTML
index.html
<main>
<div class="title">リスト</div>
<div class="todo-list">
<ul>
</ul>
</div>
</main>
<section>
<input class="form" type="text">
<button class="btn">追加</button>
</section>
<main>
<div class="title">リスト</div>
<div class="todo-list">
<ul>
</ul>
</div>
</main>
<section>
<input class="form" type="text">
<button class="btn">追加</button>
</section>
HTMLは上記になります。
今回追加するToDoタスクはul要素に追加していきます。
JS
main.js
const btn = document.querySelector('.btn');
btn.addEventListener('click',() =>{
const ul = document.querySelector('ul');
const li = document.createElement('li');
const input = document.querySelector('.form');
li.textContent = input.value;
ul.appendChild(li);
input.value = '';
const span = document.createElement('span');
span.textContent = '✔';
span.classList.add('span');
li.appendChild(span);
span.onclick = function() {
const listen = confirm('削除しますか');
if(listen === true) {
ul.removeChild(li);
}
}
});
1,イベント要素の取得
const btn = document.querySelector('.btn');
btn.addEventListener('click',() =>{
const ul = document.querySelector('ul');
const li = document.createElement('li');
const input = document.querySelector('.form');
li.textContent = input.value;
ul.appendChild(li);
input.value = '';
const span = document.createElement('span');
span.textContent = '✔';
span.classList.add('span');
li.appendChild(span);
span.onclick = function() {
const listen = confirm('削除しますか');
if(listen === true) {
ul.removeChild(li);
}
}
});
今回のイベントはボタンをクリックしたときになります。button要素をquerySelectorで取得して、定数btnに保存します。
要素を取得後、addEventListenerでイベントを登録します。
これでイベントを取得することが出来たので、処理を書いていきます。
2,親要素の取得と要素の追加
今回ToDoリストを追加するのはliタグです。liタグの親要素はulになります。なので、ulタグを取得します。
親要素取得後、liタグをcreateElementで生成します。これで空のliタグが作られました。
要素が無いので、取得します。ToDoリストにはinputタグからの値を取得します。
定数inputにquerySelectorでクラスformを取得。
空のli.textContentにinput.valueを代入します。valueで値を読み込みます。
定数ulに定数liをapendChildします。
追加後、input要素を空にするためinput.valueに「''」を代入します。
上記の流れで、ToDoリストを追加することが出来ました。次に、完了したタスクを削除できるよう実装します。
3,JSで生成された要素の削除
完了タスクを削除する実装です。
まず。liタグに「✔」を追加するためにspanタグを生成します。上記と同様にcreateElementを使用します。要素の追加も上記の通りです。
先ほどと同様の手順で要素を生成すると、タスク追加時にタスクの右隣に✔がついている段階です。
目的としては、✔をクリックしたときに削除することです。
イベントを登録します。
const spanBtn = querySelector('span');
spanBtn.addEventListener('click',()=>{
console.log(spanBtn);
});
上記のように記述すると
spanBtn is not defined
とerrorが出ます。DOM操作では、直接HTMLを操作しているわけではありません。したがって、HTML上にはspanタグはありません。
上記のようなerrorが発せられると言うわけです。
そこで下記のように記述します。
span.onclick = function() {
const listen = confirm('削除しますか');
if(listen === true) {
ul.removeChild(li);
}
}
//定数名.イベント =関数;
そして削除する前に条件分岐でユーザーに確認します。
trueであれば親要素ulから子要素liを削除します。
Author And Source
この問題について(ToDoリスト), 我々は、より多くの情報をここで見つけました https://qiita.com/akari_0618/items/19736b0d1103aef5b019著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .