入力フォームの字数制限のエラーメッセージが出ない。

実現したいこと
htmlコードにある。「お問い合わせ内容入力（150文字）」のテキストエリアの入力フォームの入力文字数を150文字を超えて、送信ボタンを押したときにエラーメッセージを出したいのですが、エラーメッセージが出なくて困っています。

試したこと

原因が分かりません。コードが間違っているのでしょうか？

お手数ですが回答よろしくお願いいたします。

html
1<!DOCTYPE html>
2
3<html>
4
5<head>
6    <meta content="text/html; charset=utf-8" />
7    <meta name="viewport" content="width=device-width, initial-scale=1">
8    <title></title>
9    <link rel="stylesheet" href="companyhp6form1.css">
10   
11    
12    <style type="text/css">
13
14   
15
16      /* 入力フォームの位置 */
17
18      .auto-style1 {
19
20text-align: center;
21
22}
23
24
25/* セレクトボックスの位置 */
26.auto-style2 {
27
28text-align: center;
29/* セレクトボックス中央に配置 */
30margin-top: 30px;
31}
32
33
34
35
36
37
38
39
40</style>
41
42</head>
43
44<body>
45 <form action="" method="post">
46
47 <div class="auto-style1">
48            <p class="tel-titile">
49                お問い合わせ内容入力（150文字）：
50            </p>
51                <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内でお願いします。">
52                  </textarea>
53                </div>
54            
55
56        <div class="auto-style1">
57
58            <button type="submit" id="submit" name="submit" class="auto-style4">
59               送信</button>
60        </div>
61
62    </form>
63
64   </div>
65</body>
66
67<script src="main.js"></script>
68
69</html>
70
71

css
1#question {
2  
3  border: 2px solid #4e4e4e;  /* 枠線 */
4  padding: 0.5em;          /* 内側の余白量 */
5  background-color: snow;  /* 背景色 */
6  width: 31.6em;             /* 横幅 */
7  height: 170px;           /* 高さ */
8  font-size: 1em;          /* テキスト内の表示文字サイズ */
9  line-height: 1.2;         /* 行の高さ */
10margin-top: 25px; /* フォームの縦位置調節のため */
11}
12/* pxで指定 入力フォーム、セレクトボックスの上の文字タイトルの行間の大きさ、文字サイズ、太さ*/
13.tel-titile{
14  line-height: 0px;/* 文字の行間 */
15  font-size: 22px;/* 文字の大さ */
16  font-weight: 900;/* 文字の太さ */
17  text-align: center;/* 文字を中央に配置 */
18  color: #4e4e4e;
19}
20
21/* 送信ボタンの大きさ、スタイル */
22.auto-style4 {
23
24  margin-top: 40px;
25  /* 画像の上の余白 */
26  height: 80px; 
27 
28  width: 370px;
29   padding: 0;
30  font-size: 35px;
31  
32  margin-bottom: 40px;
33  
34  }

mainjs
1const textarea = document.getElementById('textarea');
2const submit = document.getElementById('submit');
3
4textarea.addEventListener('keyup', (e) => {
5  if (e.target.value.length > 150) {
6    alert("150文字以内で記述してください。");
7    submit.disabled = true;
8  };
9  if (e.target.value.length <= 150) {
10    submit.disabled = false;
11  };
12});

int32_t

2021/08/13 05:34

回答ではないのですけど、<textarea> に maxlength=150 を付けるのではダメなのでしょうか?

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

回答2件

F12開発ツールで、コンソールを確認しますと、

Uncaught TypeError: Cannot read property 'addEventListener' of null
at main.js:5

というエラーが出ているのが分かると思います。
これは、変数がnullだから、addEventListenerというプロパティは存在しない
と言っています。

該当のコードを見ますと、

JavaScript
1textarea.addEventListener('keyup', (e) => {
2  if (e.target.value.length > 150) {
3    alert("150文字以内で記述してください。");
4    submit.disabled = true;
5  };
6  if (e.target.value.length <= 150) {
7    submit.disabled = false;
8  };
9});

で、nullなのは変数textareaという事が分かります。

次に、textareaに値を入れている個所を、確認しますと、

JavaScript
1const textarea = document.getElementById('textarea');

ですね？

これがnullになってしまうケース、２つあります。

id=textareaのHTML要素をブラウザが読み込む前に、JavaScriptが実行されてしまった。
id=textareaのHTML要素がない。

前者を疑う場合、該当のコードをwindow.onload = function() {/* ここにコード */}
で括ってあげると、解決できるか確認できます。

後者の場合、記述したhtmlをチェックすることで、確認できます。

今回は、確認したところ、後者のようです。

ちなみに、keyupはマウスでの貼り付けを探知できないのでchangeの方がいいんじゃないかなぁと思います。

投稿2021/08/13 04:50

TetsujiMiwa

総合スコア1124

gujhufiugho

2021/08/13 08:50

わざわざありがとうございます。返信おそくなりました。changeの方がよさそうですね。マウスでの貼り付けを探知できないのは痛いですね。ありがとうございます。上記の方法で解決いたしました。もう少し意味も調べてみたいと思います。

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

ベストアンサー

デバッグされたら分かるかと思いますが、現在のコードだとイベント発生時の要素を取得してないので、要素が保持している情報は画面表示時のままです。
イベント内で要素を取得してください。
しかもテキストエリアの方はIDがHTMLにないものを指定してませんか？

js
1let textarea = document.getElementById('question');
2textarea.addEventListener('keyup', (e) => {
3  textarea = document.getElementById('question');
4  const submit = document.getElementById('submit');
5
6  if (textarea.value.length > 150) {
7    alert("150文字以内で記述してください。");
8    submit.disabled = true;
9  }else {
10    submit.disabled = false;
11  };
12});
13

150「より大きい」で指定してるのでelse ifしなくてもelseで十分だと思う。
あと改行も1字に含まれるのでテストの際は注意。

投稿2021/08/13 02:52

編集2021/08/13 05:13

m.ts10806

総合スコア80875

m.ts10806

2021/08/13 05:12

あぁe.targetから取ってきてるのか・・。いずれにしてもデバッグすれば何が起きてるか分かりますね。

gujhufiugho

2021/08/13 08:47

久しぶりですね。回答ありがとうございます。本当はmaxlength=150とかにしたかったのですが、商業用に使うことを念頭に置いていたので。。。。 keyupってマウス貼り付けできないのですね。フォームに張り付けで試して、入力していたのですが、全然発動しないので、おかしいなと思って困っていました。今、発動したので、良かったです。自分でも意味がよく分かっていませんでした。もう少し調べてみたいと思います。感謝いたします。

m.ts10806

2021/08/13 10:36

>本当はmaxlength=150とかにしたかったのですが、商業用に使うことを念頭に置いていた何の話でしょうか。 >keyupってマウス貼り付けできないのですね。何の話でしょうか。元々の仕様、設計が書かれてないままなので赤の他人としては何の話をしているのか分かりません。

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

あなたの回答