0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

完成見本
Image from Gyazo
はじめに、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>

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

このテキストエリアに文章を入力していくと、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>

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

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

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?