![見出し画像](https://assets.st-note.com/production/uploads/images/76310939/rectangle_large_type_2_5461e94608ef7be2bd2bdff79458ee30.png?width=1200)
やっぱり。JavaScript!- ToDoリスト - 2
これでJavaScriptでHTML操作していきますが、HTMLの構造は以下となっています。
<div class="container w75">
<h1 class="text-center text-info my-4" >Todo</h1>
<form id="form" class="mb-4">
<input type="text" id="input" class="form-control" placeholder="todoを入力" autocomplete="off">
</form>
<ul id="ul" class="list-group text-secondary">
</ul>
</div>
<script src="index.js"></script>
関数add()の実装をしていきます。基本形は
function add(){
alert("追加!")
}
として一旦保存してブラウザを立ち上げて入力欄にカーソルを当てて"return"してみると画面にアラートが出ると思います。
addEventListener
で入力欄に"return"すると発生するイベントが設定されました。
関数が実際に動くことが確認できたので、入力して"return"すると入力欄の下に表示されるようにします。
入力値を変数に入れて、
let todoText = input.value;
この変数をHTMLのリスト"li"で表示できるようにします。
リストを作る命令を変数に入れておいて
const li = document.createElement("li");
入力された文字をリストに入れて
li.innerText = todoText;
CSSで操作するためクラスをつけます。
li.classList.add('list-group-item')
最後にリストを表示させる"ul"にリスト"li"をくっつけていきます。(リストを追加します)
ul.appendChild(li);
入力欄を空にします。
input.value = "";
このリストの追加ですが、空欄の時に"return"しても反応せず、何か入っているときのみ追加できるようにします。その方法は
if (todoText){
処理
}
というふうにします。"todoText"に何か入ってると"true"となって処理が進みます。何も入ってないと何も起きません。
全体です。
function add(){
let todoText = input.value;
if (todoText) {
const li = document.createElement("li");
li.innerText = todoText;
li.classList.add('list-group-item')
ul.appendChild(li);
input.value = "";
}
}
これで入力欄になにか文字を入れて"return"すると下にリストとして表示されるようになります。
これはリロードすれば消えてしまいますので次は保存できるようにします。
この記事が気に入ったらサポートをしてみませんか?