やっぱり。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"すると下にリストとして表示されるようになります。

これはリロードすれば消えてしまいますので次は保存できるようにします。