I have a website where there is a empty box and a input text box. I want to be able to type something in that input box and have it be printed on the empty box.
<div class='printchatbox'></div>
which is the empty box and
<input type='text' name='fname' class='chatinput'>
which is the input box.
.printchatbox
{border-width:thick 10px;border-style: solid;
background-color:#fff;
line-height: 2;color:#6E6A6B;font-size: 14pt;text-align:left;float: middle;
border: 3px solid #969293;width:40%;}
If anyone could tell me how to do this I would greatly appreciate it. Thanks
You use the onkeyup
event
Searching with ids is a lot easier. Add ids to your elements as follows:
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' class='chatinput' id='chatinput'>
JS
const inputBox = document.getElementById('chatinput');
const printBox = document.getElementById('printchatbox');
inputBox.addEventListener('keyup', function (event) {
printBox.innerHTML = inputBox.value;
})
Here is a Live example