掲示板の入力フォームを作成していて、(メッセー
ジフォームの)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ベストアンサー
- 回答日時:
原因はエラー文の通りです
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 …
No.3
- 回答日時:
こんにちは
質問文にご提示のものをそのままコピペして実行すれば動作しますよ。
(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で制御しております。
No.1
- 回答日時:
テキストエリアに変更(=キーボード入力)があった際のイベントを拾っていません。
そのイベントを拾って起動される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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
フィールドを有効(enabled?)に...
-
submit後、同じ入力欄に戻らせ...
-
Javascript 郵便番号の入力欄で...
-
onClickとsubmitの処理順序
-
javaでフォーム入力の確認と文...
-
テキストボックスの文字種を全...
-
javascriptでの正規表現について
-
参考書通りに入力したつもりで...
-
JavaScriptで入力文字制限
-
JSPとJavaScriptの連携について...
-
Javascript 入力フォーム&コピー
-
javascriptのゲームで漢字を出...
-
テキストボックスを無効にする...
-
return trueとreturn falseの用...
-
追加ボタンを押した際に ok ボ...
-
<JavaScript>tableタグを入力不...
-
hiddenのvalueの値を変えたい
-
プルダウンで選択すると、DBの...
-
javascriptでASPにデータを渡す
-
selectを変更不可にしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onClickとsubmitの処理順序
-
JSPとJavaScriptの連携について...
-
javascriptで入力フォームが空...
-
テキストボックス入力を半角英...
-
PDFフォームで条件つき金額を表...
-
条件により、リンク先に画面遷...
-
javascriptで入力禁止文字をチ...
-
テキストボックスを無効にする...
-
テキストフィールドに入力した...
-
テキストエリアに入力可能な文...
-
ソースコードは下の共有コード...
-
イベント発生時に入力待ち状態...
-
フォームの値が0だったら空白...
-
URLの/以降だけを入力したいです。
-
文末の改行コードを削除したい
-
VBScriptで未入力のチェック(...
-
テキストボックスのグレーアウト
-
手書き入力モードを利用して、...
-
日付入力欄の表示形式を自動的...
-
フォームから入力すると、入力...
おすすめ情報