はじめに

前回の記事https://qiita.com/men_blu/items/8fb773029516026b6d15
で、YouTubeで紹介されていたサンプルのクイズアプリケーションをtodoアプリに改造する方針を固めた。

今回の実装においてユーザーが使用する流れとしては、
青いテキストボックスにタスク名を入力しその達成度に応じたボタンを押す=>画面が切り替わり空になったテキストボックスに他のタスクを入力する．．．(繰り返し)とする。

そうすると
1.文字列が入力可能であるテキストボックスと、
2.ボタンを押すとテキストボックスに入力されていた文字列が空になる機能
が必要となる。

そこで今回は、Webページのある箇所をテキストボックスに置き換える方法と、ボタンを押したタイミングで中身を空にする方法をご紹介する。

至極初歩的な方法を用いているので、どうぞご安心されたい。

ある要素をテキストボックスにする

まず、タスク名を入力可能にするため下記画像の'ゲーム史上、最も売れたゲーム機はどれ?'と記載がある部分をテキストボックス化する。

この箇所のHTMLコードは以下の通りである。

<div id="js-question" class="alert alert-primary" role="alert">
 A simple primary alert—check it out!
</div>

ここを
(↓変更後)

<input type="text" id="js-question" class="alert alert-primary" role="alert">
 A simple primary alert—check it out!
</input>

と改造すれば、↓のように入力が出来るようになっている。

このように、任意のHTMLタグに

<input type="text">

を追加するだけで、その箇所をテキストボックス化することができる。

テキストボックスの中身を空にする方法

タスクの内容を書き込めるようになったとは言え、いつまでも同じタスクが表示されていたのでは複数のタスクが扱えない。
そこで、達成度を示すボタン(「OK」などが書いてある、青色のボタン)を押すと次のタスクが入力できるようにする必要がある。

つまり、ボタンを押した後にテキストボックスが空になるような実装が必要ということである。

そのために、ここでは新たにquestという変数を定義(↓4行目参照)し、そこにテキストボックス要素を代入するようにしている。

while(answersIndex < answersLen){
  $buttons[answersIndex].addEventListener('click', (e) => {
    count(e.target);
    let quest = document.getElementById("js-question");
    quest.value = '';
  });
  answersIndex++;
}

続く5行目では、quest.valueに''(空文字列)を代入している。

何をしているかと言うと、questには消したい要素(テキストボックス要素)が代入されているので、その中身(.value)に空文字を代入し、テキストボックスを空にしているのである。

これを、ボタンが押される度呼ばれる関数に実装すれば、ボタンが押される度テキストボックスを空にすることができる。

以上

該当ソースコードのリンク