入力文字数の判定とエラー表示を実現したいです

テキストエリアに71文字以上を入力すると背景がピンクになり、エラーを表示するプログラムを書きました。背景色は変化するものの、エラー表示が上手く動作しません。取得部分とメッセージ表示部分をコメントアウトすると動作します。現在はコメントアウトしている状態です。

この2行がなぜ影響を与えているのかわからず頭を悩ませています。背景色を変化させ、エラーを表示するにはどう修正すればいいか教えていただけないでしょうか？

HTML
1    <body>
2        <textarea id="messageArea" name="messageArea" rows="4" cols="40" placeholder="メッセージを入力してください"></textarea>
3        <span id="showMessageLength">0/70</span><br>
4        <p class="caution">
5            
6        </p>
7        <script type="text/javascript" src="dateObject.js"></script>
8    </body>

JavaScript
1window.addEventListener("DOMContentLoaded", function () {
2    let messageArea = document.getElementById("messageArea");
3    messageArea.addEventListener("input", function () {
4        let message = messageArea.value;
5        let msgLength = message.length;
6        let showMessageLength = document.getElementById("showMessageLength");
7        // let cautionMsg = document.getElementByClassName("caution");
8        showMessageLength.textContent = msgLength + "/70";
9
10        if (msgLength > 70) {
11            // cautionMsg.textContent = "入力文字数が70文字を超えました。";
12            messageArea.classList.add("alertBg");
13
14        } else {
15            messageArea.classList.remove("alertBg");
16        }
17    });
18});

css
1.alertBg {
2    background: pink;
3}

行動規範の内容に同意します

回答3件

肝心のところコメントアウトされていてはコピペで確認できないのですけど・・・

×getElementByClassName
○getElementsByClassName

あとは子要素の配列風オブジェクトで取れるので、適宜参照。

ただ、もし複数項目設けるつもりでしたら、構成工夫しないと厳しくなると思いますが。

投稿2020/09/09 06:51

m.ts10806

総合スコア80875

退会済みユーザー

2020/09/09 07:44

コメントアウトせずに動作しない状態で書く必要がありましたね。申し訳ないです。スペルを修正しても<p>のエラーメッセージは表示されませんでした。簡単に思えていただけに、どこが悪いのかわかりません。今回は複数項目設けるつもりはなく、まずは単純に背景色とメッセージを表示させてみたいです

m.ts10806

2020/09/09 07:45

関数名のミスだけを指摘していません。その後どうするかもちゃんと書いてますよ。

m.ts10806

2020/09/09 07:47

>今回は複数項目設けるつもりはなく、あくまで「今後の展開」の話です。 classにしているなら複数設けるつもりなのかもしれないと勝手に想像しました。 1個しか設けないならidで十分ですね。

退会済みユーザー

2020/09/10 06:29

その後のアドバイスを理解できていませんでした。インデックスを指定することで無事に表示できました。ありがとうございました

行動規範の内容に同意します

HTML
1<textarea maxlength="71"></textarea>

では駄目なんでしょうか？

投稿2020/09/09 07:10

yambejp

総合スコア116724

退会済みユーザー

2020/09/09 07:41

そんな便利な属性があったんですね。ただ、今回は文字入力はできるがエラー表示されるというTwitterで見かけるような仕様にしてみたいんです

行動規範の内容に同意します

ベストアンサー

こんにちは。コメントアウトされている以下の行

javascript
1// let cautionMsg = document.getElementByClassName("caution");

に書かれているgetElementByClassName はスペルミスで、正しくは getElementsByClassName　です。つまり、By　の前の s が抜けています。この点を修正してみるといかがでしょう？

投稿2020/09/09 06:52

jun68ykt

総合スコア9058

退会済みユーザー

2020/09/09 07:42

VS Codeが反応してなかったのでスペルミスだったとは思いませんでした。ただ、修正しても<p>のエラーメッセージは表示されませんでした

jun68ykt

2020/09/09 07:53

もうひとつの行も要修正でした。下記のようにcautionMsgの直後に [0] を追加します。【修正前】 cautionMsg.textContent = "入力文字数が70文字を超えました。"; 【修正後】 cautionMsg[0].textContent = "入力文字数が70文字を超えました。"; これでいかがでしょうか？

退会済みユーザー

2020/09/10 06:27

getElementsByClassNameで取得したらインデックスが必要だったんですね。理解できました。ありがとうございました

jun68ykt

2020/09/10 06:40

どういたしまして。 > getElementsByClassNameで取得したらインデックスが必要だったんですね。はい。同じCSSクラスを持つ要素は2個以上存在し得るので、getElementsByClassName が返す値も、複数の要素を格納する、（HTMLCollectionというインターフェイスを持つ）配列のようなオブジェクトになります。このオブジェクトから各要素を取得するには、配列から要素を取り出すのと同じように、 HTMLCollectionオブジェクト[インデクス] で取り出します。

行動規範の内容に同意します

あなたの回答