I'm really new with JS, HTML, CSS etc. but am trying to create a proof of concept that uses web sockets. I want to display text either pushed from the server or entered by the use and sent to the server by adding the text to a scroll text area. I'm just attempting to get text added by the used working now.
The use types the text into an input text box and either clicks on a button or presses "enter" to move the text to the scroll box. It works when I click the button but when I press return in the input text area it's added to the text in the scroll box but almost immediately ALL the text that has been added vanishes!
Here's the HTML5 file, index.html:
Here's the js file:
The use types the text into an input text box and either clicks on a button or presses "enter" to move the text to the scroll box. It works when I click the button but when I press return in the input text area it's added to the text in the scroll box but almost immediately ALL the text that has been added vanishes!
Here's the HTML5 file, index.html:
<!DOCTYPE html><html><head><title>Start Page</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style>
input[type="text"]
{
width:575px;
display:block;
margin-top: 10px;
margin-left: 10px;
margin-bottom:10px;
background-color:white;
}
input[type="button"]
{
width:120px;
margin-left:470px;
margin-bottom:10px;
display:block;
}</style></head><body><h1>Pyrorama Web Application Demo</h1><div id="LogWindow" style="box-shadow: 10px 10px 5px #888888;width:600px;height:500px;text-align:left;white-space:nowrap;margin-bottom:20px;overflow:auto;border:2px solid;">
Logging ...</div><form name="input" action="" method="get" style="box-shadow: 10px 10px 5px #888888;width:600px;border:2px solid;"><input type="text" id="CommandTxt" name="Command" placeholder="Enter Command" size="20"><input type="button" id="ExecuteBtn" value="Execute"></form><script type="text/javascript" src="pyrorama.js"></script></body></html>Here's the js file:
var btnExecute = document.getElementById("ExecuteBtn");
btnExecute.addEventListener("click", onClick, false);
var txtCommand = document.getElementById("CommandTxt");
txtCommand.addEventListener("keydown", onKey, false);
var logWindow = document.getElementById("LogWindow");
var sendPrefix = "<br>---> ";
var receivePrefix = "<br><--- ";
// detect a CR as EOL
function onKey(evt) {
if (evt.keyCode == 13)
getCommand(false);
}
// Execute button clicked - don't care which button now
function onClick(evt) {
getCommand(true);
}
// User is finished with entry so process the command
function getCommand(isClick) {
var message = txtCommand.value;
if (message.length === 0)
return;
writeToLog(sendPrefix.fontcolor("green"), message);
if (isClick)
txtCommand.value = "";
// sendText(json);
}
// generalized for messsages generated or received.
function writeToLog(prefix, message) {
logWindow.innerHTML += prefix.bold();
logWindow.innerHTML += message;
}