フォームの文字をカウントするものを一つのページで2パターン制作しようとしています。1日試してもできませんでした....

Question

前提・実現したいこと

フォームの文字をカウントするものを一つのページでふたパターン制作しようとしています。
一つは最大文字数が40のもの
もう一つは最大文字数が200のものです

全角は文字数1
半角は文字数0.5として表示したいと思っています。

参考サイトなど様々見たんですが、
一つだけならきちんと動くんですが、二つになると片方は動かなくなってしまいます。

JSあまり得意でなくて正直お手上げです。

参考にしたサイトはこちらです。
http://blog.tofu-kun.org/070627210315.php

どなたか助けていただけると泣いて喜びます。
よろしくお願いいたします。

該当のソースコード

 =========== JS ===========

<script type="text/javascript">
//入力文字数カウント

function strLength(strSrc){
	len = 0;
	strSrc = escape(strSrc);
	for(i = 0; i < strSrc.length; i++, len++){
		if(strSrc.charAt(i) == "%"){
			if(strSrc.charAt(++i) == "u"){
				i += 3;
				len++;
			}
			i++;
		}
	}
	return len;
}
function showLength( str,idn ) {
	var strCount = Math.ceil(strLength(str).toString() / 2);
	if(strCount >= 200){
		document.getElementById(idn + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 200</em>';
	}else if(strCount >= 200){
		document.getElementById(idn + "Inner").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 200</em>';
	}else{
		document.getElementById(idn + "Inner").innerHTML = strCount + " / 200";
	}
}
</script>
<script type="text/javascript">
//入力文字数カウント

function strLength2(strSrc){
	len = 0;
	strSrc = escape(strSrc);
	for(i = 0; i < strSrc.length; i++, len++){
		if(strSrc.charAt(i) == "%"){
			if(strSrc.charAt(++i) == "u"){
				i += 3;
				len++;
			}
			i++;
		}
	}
	return len;
}
function showLength2( str,idn ) {
	var strCount = Math.ceil(strLength(str).toString() / 2);
	if(strCount >= 40){
		document.getElementById(idn + "Key").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 40</em>';
	}else if(strCount >= 40){
		document.getElementById(idn + "Key").innerHTML = '<em style="color:#ff0000;">' + strCount + ' / 40</em>';
	}else{
		document.getElementById(idn + "Key").innerHTML = strCount + " / 40";
	}
}
</script>

 =========== HTML ===========

<span id="keyword1Key">0/40</span>
<input type="text" class="inputBox" size="50" name="main_concept_keyword" value="●●●●●●●●●●●" id="keyword1" onkeyup="showLength(value,id);" />

<span id="text1Inner">0/200</span>
<textarea class="inputBox" rows="4" cols="100" name="main_concept_body" id="text1" onkeyup="showLength(value,id);"●●●●●●●●●●●</textarea>

Answer 1

<span id="keyword1Key">0/40</span>
<input type="text" class="inputBox" size="50" name="main_concept_keyword" value="●●●●●●●●●●●" id="keyword1" onkeyup="showLength(value,id);" />

ここのところの、showLenghをshowLength2にするだけで、意図通り動作しているように拝見します。

Comments

[mukuta0111]

早速試して見ます！

[mukuta0111]

え、できました....
こんな簡単なことだったのか....

ありがとうございます！！
本当にありがとうございました！

Answer 2

単純にmaxlength=40（および200）を指定するだけでは？

Comments

[mukuta0111]

「maxlength」ですと、
半角を0.5で全角を1にしているのがダメになってしまって,,,,

すいません。
そこも追記しておきます。

回答ありがとうございます。

[yambejp]

半角文字とはなにか再定義ください
0-9a-zA-Zは当然として、記号含みますか？
空白文字（スペース、タブ、改行文字）はどうでしょう？
半角カタカナなどはどうでしょうか？

[mukuta0111]

解決いたしました！
回答ありがとうございます！

次回から、もっと詳細に説明を書くようにします！
ありがとうございます！