Question

I am relatively new to JavaScript and DOM, but have experience with C++. I am working on several JavaScript experiments which rely heavily on DOM, including a console that responds to commands. The whole thing is working fine, except when the element gets longer than the page.
The way the console works is using DOM it takes an element and adds a line to the content. This is a problem because when clearing it I cannot target a specific line, namely the top one, to only clear/modify that one. I’ve tried everything I know, for loops, arrays, nested ifs, etc, but with no luck. I just want the console to stop extending endlessly and either have a scrolling bar or just start clearing old lines.
Here is the current clearing mechanism (pretty useless):

if (extended > 24)
{
    alert("Message Stream full, resetting.");
    document.getElementById("boxRightSpace").innerHTML = "";
    extended = 0;
}

Any help would be appreciated. Thanks.

Answer 1

You could scroll the console to bottom, every time you insert a new line:

document.getElementById("boxRightSpace").scrollTop = document.getElementById("boxRightSpace").scrollHeight;

The console-div itself has to have a fixed height and overflow:auto like so

#boxRightSpace {
   overflow: auto;
   height: 300px;
   width: 400px;
}

Alternatively, you could remove lines by this approach:

<div id="boxRightSpace">
    <div>line1</div>
    <div>line2</div>
    <div>line3</div>
    <div>line4</div>
    <div>line5</div>
    <div>line6</div>
    <div>line7</div>
    <div>line8</div>
</div>

<script>

    var max_console_items = 5,
        cons= document.getElementById("boxRightSpace"),
        console_items = cons.getElementsByTagName("div");

    while (console_items.length > max_console_items)
    {
        cons.removeChild(console_items[0]);
    }
</script>