入力フォームのリアルタイムチェックをしたい

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

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

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

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

         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桁で入力してください";
            }
         }

            <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>

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