JavaScriptを使って文字カウントアプリを作る

7153 ワード
HTML CSS デザイン JavaScript HTML テキストリンク

JavaScriptを使って文字カウントアプリを作ろう！

完成見本

はじめに、HTMLファイルを作成します。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字カウントアプリ</title>
  </head>
  <body>
    <script>

    </script>
</body>
</html>

文字を入力するテキストエリアを作ります。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>文字カウントアプリ</title>
  </head>
  <body>
    <textarea id="text" cols="50" rows="7"></textarea>
    <p id="count">0文字</p>

    <script>

    </script>
</body>
</html>


テキストエリアができました。

このテキストエリアに文章を入力していくと、p要素に現在の文字数がリアルタイムに出力されるようにしていきます。

ここからjavascriptの記載をしていきます。
まず、テキストエリアと文字数を表示するHTML要素のID属性をgetElementById()を利用して取得します。

index.html

<script>
    const text = document.getElementById("text");
    const count = document.getElementById("count");
</script>

取得したテキストエリアの要素にイベント処理を追加していきます。
addEventListener()を利用します。addEventListener()とは、様々なイベント処理を実行できるメソッドです。

index.html
<script>
    const text = document.getElementById("text");
    const count = document.getElementById("count");

    text.addEventListener("keyup", () => {

        // 文字数をカウントする処理を記述する

    });
</script>

イベントはkeyupです。これは、キーを押して離した瞬間に毎回イベントが実行されます。
1文字ずつ入力するたびに文字数をカウントして出力することができます。

文字数を取得するには、valueプロパティから文字列をまずは取得します。そのあとにlengthプロパティを使えば文字数を得られます。

index.html
    <script>
      const text = document.getElementById("text");
      const count = document.getElementById("count");

      text.addEventListener("keyup", () => {
        const inputText = text.value;
        count.textContent = inputText.length + "文字";
});
    </script>

これで、文字カウントアプリは完成です。

間違い等ありましたらご指摘いただければ幸いです。
最後までご覧いただき、ありがとうございました。