Javascript: adding selected text to an array

Question

My goal: every time the user selects the text and presses the button, this text is added to the array. Problem: every time a button is clicked, all array objects become overridden in the current selected text.

I am very grateful for the help in changing the behavior so that the selected text does not overlap all previous elements of the array.

<script type="text/javascript">
  var selects = new Array();
  selects.push("1");
  function getSelText()
{
    var i = 0;
    while (i<1) {
    var txt = [null];
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
    }
    else return;
    selects.push(txt);
    i++;
    };
document.menu.selectedtext.value = selects;
}
</script>


<form class="menu" name="menu">
  <input type="button" value="highlight" class="highlightButton" onmousedown="getSelText()"/>
  <textarea name="selectedtext" rows="5" cols="20"></textarea>
</form>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 1

window.getSelection() , , . . , . , :

selects.push( "" + TXT);

... "+" + . () ...

Answer 2

, :-) aaa! !!!

, . . "txt" :

     txt = '' + window.getSelection();

"selects":

     selects.push('' + txt);