質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1798閲覧

if文で文字数を取得するには

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/03/08 11:01

勉強しはじめの初心者です。
文字数カウントの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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FKM

2019/03/08 11:22

str.lengthの値は毎回加算されていってるのでしょうか? console.log(str.length)を使って、ブラウザの開発画面で確認してみてください。
papinianus

2019/03/08 11:36

この2つを組み合わせて確認しましたが、おそらく意図通り動作しています(アラートが出ます) keyupでの文字数表示は動いていて、ボタンアラートだけ動かないということでしょうか? また、これ以外にもコードはあって、必要部分だけ抜いているのですよね?idや変数名に重複がないか見ていただけますか?
退会済みユーザー

退会済みユーザー

2019/03/11 03:20

ご連絡が遅くなってしまい申し訳ございません。 ボタンアラートだけが意図しない動作になっています。 inputフォームに文字を入力すると、フォーム下にリアルタイムでカウントされていき、10文字以上になるとマイナス表記になります。 同じ様に、ボタンアラートでinputフォームの入力文字数が10文字以内の場合は「OK」、10文字を超えている場合は「NG」とアラートで表示させたいのです。 しかし質問文で貼り付けたソースですと、10文字を超えてもアラートは「OK」と表示されてしまいます。
guest

回答1

0

ベストアンサー

質問者の意図と異なる値が返されているのが原因です。
getNumには入力文字数ではなく、残り入力できる文字数が返っています。

ですが、if文は10文字未満かという制御しかされていませんね。なので、0文字以上という制御を付けないとif文の判定でtrueを返します。

【エラーの原因について】
スクリプトの記述がひょっとして、htmlを読み出す前じゃないでしょうか?
そうだとするとinnerHTMLプロパティはセレクタが読み取れないのでnullを返してしまうエラーとなり、何も動きません。

なので、htmlより後にそのスクリプトを記述する必要がありますね(そうすると、システムはちゃんと動きました)

補足
javascriptはどこに記述してもいいのではなく、記述した位置によって読み込む順番が変わるので、ロード時にhtmlからセレクタの要素を取得、操作したりする場合は必ずhtmlより後に記述するか、bodyタグにonLoadイベントなどを与えるかする必要があります。

投稿2019/03/08 11:56

編集2019/03/11 04:00
FKM

総合スコア3608

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/03/11 03:47

ありがとうございます!できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問