Javascript 根据文本字段中的字符数调整DIV的大小

我制作了一个文本框，我将文本输入其中，并在键入时在下面的div中打印出来。目前，DIV可以容纳24个字符，然后我就有了要包装的文本。我想做的是让每输入24个字符，DIV的高度增加一倍

我只想使用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>

---

从css中删除if条件和高度，它就可以正常工作。 检查下面的工作示例

var stringToBePrinted=document.getElementById（“无点输入”）；
var len=stringToBePrinted.length；
stringToBePrinted.onkeyup=函数（）{
var len=stringToBePrinted.length；
document.getElementById（“printbox”）.innerHTML=stringToBePrinted.value；
}

.printbox{
边框宽度：厚10px；
边框样式：实心；
背景色：#fff；
线高：2；
颜色：#6E6A6B；
字号：14pt；
文本对齐：居中；
边框：3px实心#969293；
宽度：50%；
保证金：自动；
单词包装：打断单词；
}

输入一些文本

.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;
}

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";   
}