勉強しはじめの初心者です。
文字数カウントのJavascriptを作ったのですが、その下にチェックボタンを置いて、10文字以下ならアラートでOK11文字以上ならNGと表示させたいのですが、うまく分岐ができません。
アラート部分で文字数を拾えていないようなのですが、原因がわかりません。なにかヒントを頂けないでしょうか?
よろしくお願い致します。
HTML
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>文字数カウンター</title> 6 </head> 7 <body> 8 <h1>文字数カウンター</h1> 9 <textarea id="input_text" rows="5" cols="50"></textarea> 10 <p id="character_count_wrap">残り<span id="character_count">0</span>文字です</p> 11 <input id="btn" type="button" value="チェック"> 12 13 <script src="character_counter.js"></script> 14 </body> 15</html>
javascript
1(function(){ // 即時関数 2 'use strict'; //strictモード(厳格モード) 3 4 // id input_textのエレメントを取得 5 var e = document.getElementById('input_text'); 6 // 初期値をセット 7 document.getElementById('character_count').innerHTML = 10; 8 9 // keyupのイベント発生時に、入力文字数をコンソールに出力 10 e.addEventListener('keyup', function() { 11 // console.log(e.value); 12 // console.log(e.value.length); 13 14 // テキストエリアの文字列を変数に代入 15 var str = e.value; 16 //改行の削除 17 str = str.replace(/\r?\n/g, ''); 18 // 文字数の表示 19 // console.log(str.length); 20 21 var remaining = 10 - str.length; 22 document.getElementById('character_count').innerHTML = remaining; 23 24 if(remaining >= 0) { 25 document.getElementById('character_count_wrap').style.color = 'black'; 26 } else { 27 document.getElementById('character_count_wrap').style.color = 'red'; 28 } 29 }); 30 31 32 33})(); 34// ボタンをクリックした時に文字数が上限を超えていたらアラート 35var btn = document.getElementById('btn'); 36var getNum = document.getElementById('character_count'); 37 38btn.addEventListener('click', function(){ 39 console.log(getNum.innerHTML); 40 41 if(getNum.innerHTML <= 10) { 42 alert('OK' + getNum.innerHTML); 43 } else { 44 alert('NG' + getNum.innerHTML); 45 } 46}) 47
str.lengthの値は毎回加算されていってるのでしょうか?
console.log(str.length)を使って、ブラウザの開発画面で確認してみてください。
この2つを組み合わせて確認しましたが、おそらく意図通り動作しています(アラートが出ます)
keyupでの文字数表示は動いていて、ボタンアラートだけ動かないということでしょうか?
また、これ以外にもコードはあって、必要部分だけ抜いているのですよね?idや変数名に重複がないか見ていただけますか?
ご連絡が遅くなってしまい申し訳ございません。
ボタンアラートだけが意図しない動作になっています。
inputフォームに文字を入力すると、フォーム下にリアルタイムでカウントされていき、10文字以上になるとマイナス表記になります。
同じ様に、ボタンアラートでinputフォームの入力文字数が10文字以内の場合は「OK」、10文字を超えている場合は「NG」とアラートで表示させたいのです。
しかし質問文で貼り付けたソースですと、10文字を超えてもアラートは「OK」と表示されてしまいます。
回答1件
あなたの回答
tips
プレビュー