Capturing Input and Providing Output with Javascript

Question

I'm finally getting around to learning Javascript; I am trying to do something simple: capture keyboard input while providing output. I get semi-responsive output for keyboard presses, however I am not able to append the output portion of the page with a line of input once enter is pressed. What am I doing wrong?

<script language="javascript">
    processCommand = function(cmd) {
        if (this.text == null) this.text = "";
        this.text = this.text + cmd + "<br>";
        document.getElementById("outputID") = this.text;
    }
    document.onkeydown = function(evt) {
        if (this.text == null) this.text = ""; 
        var keyChar = String.fromCharCode(evt.keyCode);
        this.text = this.text + keyChar;
        if (evt.keyCode == 13) {
            processCommand(this.text);
            this.text = "";
        }
        document.getElementById("input").innerHTML = this.text;
    };
</script>
<spad id="outputID"/><br>
<hr>
<spad id="input"/>

It's document.getElementById("outputID").innerHTML = this.text not document.getElementById("outputID") = this.text;. — Dave Chen
– Dave Chen, Commented Oct 24, 2015 at 4:16
First thing I would do is introduce a variable for document.getElementById("outputID") and document.getElementById("input") elements. No need to look them up on every key press — DanielS
– DanielS, Commented Oct 24, 2015 at 4:17

Olavi Sau · Accepted Answer · 2015-10-24 04:42:18Z

3

http://codepen.io/anon/pen/gavNOm

<script language="javascript">
 processCommand = function(cmd) {
    if (this.text == null) this.text = "";
    this.text = this.text + cmd + "<br>";
    outputID.innerHTML = this.text;
}
document.onkeydown = function(evt) {
    if (this.text == null) this.text = ""; 
    var keyChar = String.fromCharCode(evt.keyCode);
    this.text = this.text + keyChar;
    if (evt.keyCode == 13) {
        processCommand(this.text);
        this.text = "";
    }
    input.innerHTML = this.text;
   };
 </script>
 <span id="outputID"/><br>
<hr>
<span id="input"/>

The id's are attached to the window object, by the way using vars in functions is much less confusing.

edited Oct 24, 2015 at 4:42

answered Oct 24, 2015 at 4:19

Olavi Sau

1,63913 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

motoku Over a year ago

this.text in both functions are intended to be two separate variables

motoku Over a year ago

ok thanks for the tips. now I need to discover why processCommand seems to work only once

Collectives™ on Stack Overflow

Capturing Input and Providing Output with Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related