I created a custom console using HTML, CSS, and JavaScript.
The input doesn't show up when I press enter, I have to click the send button. How can I make it send on enter press?
Here is the code, please assist me:
/* code goes below*/
<!DOCTYPE html>
<html>
<head>
<title>Konsole</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
</head>
<body>
<style>
body{
monospace
}
body{
color:#52cc29;
background-color:black;
font-family:monospace;
}
div.textarea > textarea{
height:80vh;
width:95%;
font-family:monospace;
font-size:20px;
font-weight:bold;
color:#52cc29;
background-color:black;
border:5px solid white;
}
input.command{
height:30px;
width:70%;
background-color:black;
border:3px solid white;
color:#52cc29;
font-size:15px;
text-align:left;
padding-left:4px;
font-family:monospace;
font-weight:bold;
}
h3{
font-family:monospace;
font-size:20px;
font-weight:bold;
}
input.send{
background-color:black;
color:#52cc29;
font-family:monospace;
font-weight:bold;
height:35px;
width:60px;
font-size:20px;
}
</style>
<script>
function chat(){
var time = new Date();
var hours = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds;
var write = document.getElementById("area2").value;
var read = document.getElementById("area1").value;
var newRead = "you at " +" "+hours+"h:"+min+"m"+" : " + write + "\n" + read;
document.getElementById("area1").value = newRead;
switch(write){
case "@echo.off" : document.getElementById("area1").value = "echo is off";
break;
}
}
</script>
<center>
<h3>Console</h3>
<form id="form1" >
<div class="textarea">
<textarea autocapitalize="off" spellcheck="false"
autocorrect="off" autocomplete="off" id="area1" readonly ></textarea>
</div>
</form>
<form id="form2">
<div class="input">
<input autocapitalize="off" spellcheck="false" autocorrect="off" autocomplete="off" class="command" id="area2" placeholder="type command here"></input>
<input class="send" type="button" id="button" value="send" onclick="chat();">
</div>
</form>
</center>
</body>
</html>