How do I list these keypresses underneath eachother?

Question

The script shows the keypresses but they disappear when I do a new keypress

I would the html page to show:

Left

Right

Left

....

HTML:

<div id=""></div>

jQuery:

$(document).ready(function(){
        document.onkeyup = function(event) { 
        switch (event.keyCode) {
        case 37:
            $( "div" ).html(  "Left" );
            break;
        case 38:
            $( "div" ).html( "Up" );
            break;
        case 39:
            $( "div" ).html( "Right" );
            break;
        case 40:
            $( "div" ).html( "Down" );
            break;
            } 
        };      
    });

You're replacing the enter html of the div each time. Have a look here: http://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript — Steve, May 17 '17 at 13:23

score 0 · Answer 1 · answered May 17 '17 at 13:25

$( "div" ).append(  "Left" );

That appends the text to the div. For new lines you can add HTMl so a br would do it. 2 br's if you want the gap. Or you could wrap them in p's

$( "div" ).append(  "Left<br /><br />" );
$( "div" ).append(  "<p>Left</p>" );

Andrew Evt · Accepted Answer · 2017-05-17T13:28:53.700

0

example: https://jsfiddle.net/56ufg2me/

$(document).ready(function(){
    var $element = $('div');

    document.onkeyup = function(event) { 
        var text = $element.html();

        switch (event.keyCode) {
        case 37:
            $element.html( text + "<br>Left" );
            break;
        case 38:
            $element.html( text + "<br>Up" );
            break;
        case 39:
            $element.html( text + "<br>Right" );
            break;
        case 40:
            $element.html( text + "<br>Down" );
            break;
        } 
    };      
});

edited May 17 '17 at 13:28

answered May 17 '17 at 13:26

Andrew Evt

3,613
1
19
35

You might need `white-space:pre` on that div, or just swap your `\n` for `
` – Joseph Marikle May 17 '17 at 13:27
yep, ty @JosephMarikle – Andrew Evt May 17 '17 at 13:28

How do I list these keypresses underneath eachother?

2 Answers2