Javascriptが機能せず原因が分からないので教えて頂きたいです

掲示板の入力フォームを作成していて、(メッセー
ジフォームの)500文字以内であと〇文字、500文字以上で〇文字超過していますと表示させたいのですが、文字数のカウントが動いていないのか表示されず、500文字超えた場合に確認ボタンを押せないように制御するコードも機能していません。
原因は分かりますでしょうか？

※エラー文
Uncaught SyntaxError: Missing initializer in const declaration

※該当コード
<form method="post">
<div>
<label>名前(任意)</label>
<input type="text" name="namae" placeholder="未入力の場合は、匿名で表示されます" value="<?php echo $namae; ?>">
</div>
<div>
<label>コメント(必須)</label>
<label for="message">文字を入力</label>
<textarea id="message" name="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea>
</div>
<div class="msg" id="warningMessage"></div>
(略)
<div><!-- ボタンを押せなくする -->
<button type="submit" name="mode" id="submit-btn" value="confirm">確認する</button>
</div>
<!-- type、name、id、valueの順番 -->
</form>

<script type="text/javascript">
const message = document.getElementById('message'); // IDを指定してtextareaを取得
const msg = document.getElementById('warningMessage'); // 超過文字数を表示する要素
const submitBtn = document.getElementById('submit-btn'); //ボタン要素
const maxLength = 500; // 未満なら送信可能

message.addEventListener('input', () =>{ // 入力された文字数に応じて処理する
// 入力可能文字数
const inputLimit = maxLength - message.value.length;

msg.classList.remove('warning-color');
msg.textContent = 'あと' + inputLimit + '文字';
submitBtn.disabled = false;

// 入力された文字が許容をオーバーしていたら加工する
if(inputLimit < 0){
msg.classList.add('warning-color')
msg.textContent = (-inputLimit) + '文字超過しています'; // inputLimitがマイナスなので-をつけてプラスにする
submitBtn.disabled = true;
}

});
</script>

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2023/06/04 17:48

原因はエラー文の通りです

https://developer.mozilla.org/ja/docs/Web/JavaSc …

ただし、ご提示の範囲内では問題がなさそうです。
エラーには必ず発生個所の説明が付いてくるはずなので、そこから場所を特定しましょう

余談ではありますが、
「あと〇文字」と表示する機能は load イベント時にも必要かと思います。

この回答へのお礼

Q.余談ではありますが、
「あと〇文字」と表示する機能は load イベント時にも必要かと思います。

A.回答ありがとうございます、原因は#messageというセレクタがないことが原因だったようです。

<textarea name="message" id="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea>

load時にも考えたのですが、ヤフー知恵袋を再読み込みしてみると画像は消えていて文字だけ残っていた為、どちらも消すように統一したほうが良いのではないかと考えております。
入力フォームの後に確認フォームがありその後表示させるような仕組みで作成しており、確認フォームから戻る際は値を保持できているため機能としては充分ではないかと思っております。

※サンプル
http://www.irasuto.cfbx.jp/%e6%8e%b2%e7%a4%ba%e6 …

お礼日時：2023/06/04 20:45

No.3 回答者： fujillin 回答日時： 2023/06/04 18:08

こんにちは

質問文にご提示のものをそのままコピペして実行すれば動作しますよ。
（PHPの部分はHTMLに修正が必要ですが・・）

＞Uncaught SyntaxError: Missing initializer in const declaration
意味は、「変数定義が有効になされていない」といった感じですが、ご提示の範囲では特に問題は無いと思われます。
https://developer.mozilla.org/ja/docs/Web/JavaSc …

ご提示の内容以外にスクリプトは使っていないということでしょうか？
想像するところ、他の部分、あるいは他の部分との関係性からエラーになっているものと思われます。


なお、ご質問には関係ありませんけれど、submitボタンをdisableにしても、input等でEnterキー押し下げればFormはsubmitされますので、送信できないようになさりたいのならば他にチェックが必要と思われます。

この回答へのお礼

Q.なお、ご質問には関係ありませんけれど、submitボタンをdisableにしても、input等でEnterキー押し下げればFormはsubmitされますので、送信できないようになさりたいのならば他にチェックが必要と思われます。

A.回答ありがとうございます、どうやら#messageというセレクタがないことが原因だったようです。
<textarea name="message" id="message" placeholder="荒らし行為や誹謗中傷や著作権の侵害はご遠慮ください"><?php echo $message; ?></textarea>

確認ボタンを押さずにEnterキーは押せないように作成しているため、字数で制限の有無に関わらず送信はできないようにphpで制御しております。

お礼日時：2023/06/04 20:27

No.1 回答者： zircon3 回答日時： 2023/06/04 15:07

テキストエリアに変更（＝キーボード入力）があった際のイベントを拾っていません。

そのイベントを拾って起動されるfunction内でその時点でテキストエリア内にある文字数をカウントし、その数に応じて「あと何文字」とか「何文字超過」とかいった表示します。
そういう仕掛けが全く見つからず・・・。

Javascriptの勉強に使われている教材（本？）のイベントに関する説明を読みましょう。
その前にそもそもJavascriptはWebの画面（HTML）の中にどのように組み込まれ、どのように機能するのかの基本中の基本をしっかりと理解しましょう。
それにはPHPを抜きにして、HTMLだけでテキストエリアがある画面を作り、そこにJavascriptを使って作り込みたい機能を乗せる・・・ということをされるのがよいです。

参考まで。

この回答へのお礼

Q.テキストエリアに変更（＝キーボード入力）があった際のイベントを拾っていません。
そのイベントを拾って起動されるfunction内でその時点でテキストエリア内にある文字数をカウントし、その数に応じて「あと何文字」とか「何文字超過」とかいった表示します。
そういう仕掛けが全く見つからず・・・。

A.アドバイスありがとうございます、下記のようにキーが離されたときに発生するようなコードも考えたのですが、要素にIDを振ってその文字数を字数で制限するという方法でも可能だと思われます。
2通り方法がありボタンの抑制に重点を置いたためそちらに合わせて字数制限コードを書きました。

※参考サイト
https://magazine.techacademy.jp/magazine/24324

※送信ボタン制御コード
<script>
　//対象となる入力フォーム、ボタンのid
const message = document.getElementById('#message');
const submitbtn = document.getElementById('submit-btn');//-は使えないのか

//何らかの文字が入力されたら実行
inputText.addEventListener('keyup', (e) => {
if (500 => e.target.value.length) {
//入力された文字が500文字以内なら実行される
submit-btn.disabled = false;
}
})
</script>

お礼日時：2023/06/04 20:59