I have created a text box that dynamically prints out the entered text in a div below as it is typed. The current setup allows for 24 characters to be displayed in the DIV before text wrapping occurs. My goal is to double the height of the DIV for every additional 24 characters entered.
I am aiming to achieve this functionality using only pure JavaScript, without relying on 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>
stylesheet
.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;
}