44779


初めて利用するため、不備がありましたら申し訳ございません。

現在、html・CSS・JSを用いて登録フォームを作成しています。  
電話番号入力欄を下の画像のような形にする要望がでております。

[![電話番号入力欄](https://i.stack.imgur.com/K2EhH.png)](https://i.stack.imgur.com/K2EhH.png)

また、リアルタイムで文字数チェックを行いたいです。  
内容としては、３つの入力欄の合計桁数が10・11桁以外であれば  
「電話番号は10・11桁で表示してください」と表示するものです。  
（＊「default num」部分にエラー文は表示）

現在、以下のようにソースを記述しておりますが、うまくいきません。

[code]

             function ShowLength(resultid , tel1 , tel2 , tel3) {
                var tellen =  String(tel1.length) + String(tel2.length) + String(tel3.length);
                var elem = document.getElementById(resultid);
    
                if(tellen == 10 || tellen == 11){
                    elem.innerHTML = "";
                }else{
                    elem.innerHTML = "電話番号は10・11桁で入力してください";
                }
             }
[/code]

[code]

                <input type="text" name="tel_1" id="tel_1" pattern="^[0-9]+$" maxlength="5" size="10">
                -
                <input type="text" name="tel_2" id="tel_2" pattern="^[0-9]+$" maxlength="4" size="10">
                -
                <input type="text" name="tel_3" id="tel_3" pattern="^[0-9]+$" maxlength="4" size="10"
                 onkeyup="ShowLength('inputlength1',tel_1,tel_2,tel_3);">
                 <p id="inputlength1">default</p>
[/code]

javascriptがイマイチ理解できていないため、  
うまく動作するためのアドバイスをお願い致します。


CC BY-SA 4.0
2018-06-15T05:20:07.797
44777
2018-06-15T06:04:12.567
28958
question
javascript html
入力フォームのリアルタイムチェックをしたい


やりたいことはこんな感じでしょうか。

[code]

             function ShowLength(resultid , tel1 , tel2 , tel3) {
                var tel1Elem = document.getElementById(tel1);
                var tel2Elem = document.getElementById(tel2);
                var tel3Elem = document.getElementById(tel3);
                var tellen =  tel1Elem.value.length + tel2Elem.value.length + tel3Elem.value.length;
    
                var elem = document.getElementById(resultid);
    
                if(tellen == 10 || tellen == 11){
                    elem.innerHTML = "";
                }else{
                    elem.innerHTML = "電話番号は10・11桁で入力してください";
                }
             }
[/code]

[code]

                <input type="text" name="tel_1" id="tel_1" pattern="^[0-9]+$" maxlength="5" size="10" onkeyup="ShowLength('inputlength1','tel_1', 'tel_2', 'tel_3');">
                -
                <input type="text" name="tel_2" id="tel_2" pattern="^[0-9]+$" maxlength="4" size="10" onkeyup="ShowLength('inputlength1','tel_1', 'tel_2', 'tel_3');">
                -
                <input type="text" name="tel_3" id="tel_3" pattern="^[0-9]+$" maxlength="4" size="10"
                 onkeyup="ShowLength('inputlength1','tel_1', 'tel_2', 'tel_3');">
                 <p id="inputlength1">default</p>
[/code]


CC BY-SA 4.0
2018-06-15T06:04:12.567
44779
2018-06-15T06:04:12.567
27410
44777
answer