Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID

Categories

We have migrated to a new platform! Please note that you will need to reset your password to log in (your credentials are still in-tact though). Please contact lee@programmersheaven.com if you have questions.
Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Dynamicaly adding text to a "scroll box" not working.

Shellback3Shellback3 Posts: 2Member
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:

[code]<!DOCTYPE html>


Start Page


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;
}




Pyrorama Web Application Demo


Logging ...










[/code]

Here's the js file:
[code]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 = "
---> ";
var receivePrefix = "
<--- ";

// 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;
}
[/code]
Sign In or Register to comment.