- コードを表示
- スクリプトの
常時実行:OFF - サンドボックス
で作り続ける - プレビューを
全画面で表示
×
Todoリストを作ろう
×
➡ ➡ ➡
項目が追加、削除ができるTodoアプリを作ってみましょう!
余力のある人は自力でチャレンジしてみましょう!
構造
Todoリストを構成する基本的な要素として、
- Todoリストが入るタグを作る
- Todoリストにテキストを入れられるようにする
- Todoリストを追加、削除するボタンを作る
IDでタグ付け
はじめに、<input>、<button>、<ul>にIDブロックをつけましょう。
IDをつけることによって、この後行う制御フォルダを用いた作業でこれらのタグに色々な機能をつけることができます。
IDの名前は今回は<input>にtodo-input,<button>にadd-button、<ul>にtodo-listと入れることにしましょう。

次に、押すことでTodoリストを追加できるようなボタンを作りましょう。
ボタンを押した後に
<ul>の中に新たな項目<li>を入れる<input>の中に入れた文章を<li>の中に入れる
ここで制御フォルダを用いてクリックしたら
- 要素名liを追加する
- 追加した要素の内容を
<input>の内容に変更する
次に、削除ボタンをTodoリストに追加しましょう。
ボタンを押した後に、
- 要素buttonを追加し、その内容を「削除」に変える
- 削除ボタンが押された際に
<li>タグを消す