I want to input some text into a field and have it immediately displayed in a textbox.
It seems simple enough. All I need is an input field for the text, a button to submit it, and a textbox to show the entered text. However, my code doesn't seem to be working as expected.
This is the code I am using:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
function displayText(){
var userInput = document.getElementById("userInput");
var displayArea = document.getElementById("displayArea");
var newText = userInput.value;
displayArea.innerHTML = newText;
}
</script>
<div class="Webview">
<div class="message_container" id="myForm" ></div>
<form class="send_container">
<input type="text" id="userInput">
<button type="submit"
value="Send message"
onclick="displayText()">
</form>
</div>
@charset "UTF-8";
.Webview{
height: 400px;
width: 300px;
}
.message_container{
height: 80%;
width: 100%;
border:5px solid green;
}
.send_container{
height: 20;
width: 100%;
}
.send_container input{
width: 70%;
height:20%
border:2px solid #1CE615;
}
.send_container button{
width: 30%;
height:20%;
}