テキストフィールドの文字数に応じてDIVのサイズを変更します

Question

テキストボックスを作成しました。テキストボックスにはテキストが入力され、入力時に下のdivに出力されます。現在、DIVはその中に24文字を収めることができますし、次に折り返すテキストがあります。私がしようとしているのは、入力された24文字ごとにDIVを2倍にすることです。

私はJavascriptをなしjQueryの

<div class="one">Input Some Text 
     <form> 
      <input type="text" id="pointlessInput"/> 
      <script> 
       var stringToBePrinted = document.getElementById("pointlessInput"); 
       var len = stringToBePrinted.length; 

       stringToBePrinted.onkeyup = function(){ 
        var len = stringToBePrinted.length; 
        document.getElementById("printbox").innerHTML = stringToBePrinted.value; 
        if(document.getElementById("pointlessInput").innerHTML.value.length == 24){ 
         document.getElementById("printbox").style.height = "4em"; 
        } 
       } 

      </script> 
     </form> 
     <div class="printbox" id="printbox"></div> 
    </div> 

スタイルシート

.printbox { 
border-width:thick 10px; 
border-style: solid; 
background-color:#fff; 
line-height: 2; 
color:#6E6A6B; 
font-size: 14pt; 
text-align:center; 
border: 3px solid #969293; 
width:50%; 
height:2em; 
margin: auto; 
word-wrap: break-word; 
} 

Answer 1

var stringToBePrinted = document.getElementById("pointlessInput"); 

stringToBePrinted.onkeyup = function() { 
    document.getElementById("printbox").innerHTML = stringToBePrinted.value; 
    var multiple = Math.ceil(parseInt(document.getElementById("pointlessInput").value.length)/24); 
    document.getElementById("printbox").style.height = (multiple * 2) + "em"; 
} 

Answer 2

それだけで正常に動作し、もし条件とCSSからの高さを削除を使用して、これをやりたいです。 以下の動作例を確認してください。

var stringToBePrinted = document.getElementById("pointlessInput"); 
 
var len = stringToBePrinted.length; 
 

 
stringToBePrinted.onkeyup = function(){ 
 
var len = stringToBePrinted.length; 
 
document.getElementById("printbox").innerHTML = stringToBePrinted.value; 
 
}

.printbox { 
 
border-width:thick 10px; 
 
border-style: solid; 
 
background-color:#fff; 
 
line-height: 2; 
 

 
color:#6E6A6B; 
 
font-size: 14pt; 
 
text-align:center; 
 
border: 3px solid #969293; 
 
width:50%; 
 
margin: auto; 
 
word-wrap: break-word; 
 
}

<div class="one">Input Some Text 
 
     <form> 
 
      <input type="text" id="pointlessInput"/> 
 
      <script> 
 
       
 
      </script> 
 
     </form> 
 
     <div class="printbox" id="printbox"></div> 
 
    </div>