【DAY24】投稿画面における文字数の表示(1)

はじめに

Laravelを用いてQ&Aサイトを作成しています。質問に対して文字数制限を設けているので、入力時に何文字書いたかわかると便利だと思い、その機能を実装することにしました。
以下の本を参考にしました。
1冊ですべて身につくJavaScript入門講座

現在の質問投稿画面

機能実装前の投稿画面（一部抜粋）がこちらです。

質問を打ち込んでも何も表示されませんが、質問の文字数が0または制限を超えた状態で投稿ボタンを押すとエラーメッセージが表示されます。

機能の実装

まずビューにて、質問タイトルのinputタグにid、その下に文字数表示用のpタグを記述

<input type="text" name="question[title]" placeholder="タイトル" value="{{ old('question.title') }}" id="question-title-text" class="w-full rounded-2xl p-4 text-xl"/>
<p><span id="count">0</span>/50文字</p>

続いてJavaScriptで以下を記述

count.js

const questionTitleText = document.querySelector('#question-title-text');
const questionTitleCount = document.querySelector('#question-title-count');

questionTitleText.addEventListener('keyup', () => {
   questionTitleCount.textContent = questionTitleText.value.length; 
});

私はLaravelBreezeを用いているので、作成したcount.jsをapp.jsでインポートします。

app.js

import "./count"; //追記

おそらくHTML内にscriptタグを用いてJSを記述するのでも問題ないはずです。
これでリアルタイムで文字数が分かるようになりました。

文字の色の変更

指定の文字数を超えた場合は数字の色が赤になると分かりやすそうなので、その機能を実装していきます。
JavaScriptにクラスを追加、または削除する処理を追記

count.js

const questionTitleText = document.querySelector('#question-title-text');
const questionTitleCount = document.querySelector('#question-title-count');

questionTitleText.addEventListener('keyup', () => {
   questionTitleCount.textContent = questionTitleText.value.length; 
   if (questionTitleText.value.length > 50) {
       questionTitleCount.classList.add('text-red-500');
   } else {
       questionTitleCount.classList.remove('text-red-500');
   }
});

私はTailwindCSSを用いているので、text-red-500というクラス名を加えるだけで文字が赤色になります。通常はここで指定したクラス名に対してcsssで色を指定することになります。
これで指定の文字数を超えたら色が赤になるようになりました。