添加新文本时如何使textarea文本保持静态

Question

我有<textarea>根据一些javascript添加了文字。这一切都很棒。唯一的问题是，当添加文本时，它将替换已存在的文本。不知道如何阻止这种情况发生，并让它只是添加到那里已经存在的东西。

JS：

function addNote0(text, element_id) {
document.getElementById(element_id).value += text;


var tabTextRows = ['','','','','',''];

$('.note').click(function(){
  var fret = $(this).index() - 1;
  var line = $(this).parent().index() -1;
  updateNote(fret, line);
});

function updateNote(fret, line){
  var i;
  for(i=0;i<tabTextRows.length;i++){
    if(i == line) tabTextRows[i]+='-'+fret+'-';
    else tabTextRows[i]+='---';
    $('#tabText').val(tabTextRows.join('\n'));
  }
}}

window.onload = function() {
  addNote0('','tabText');
};

textarea正被添加到：

<textarea rows="6" cols="24" id="tabText" name="text">--
--
--
--
--
--</textarea>

因此，每次点击<td>时，它都会替换当前的“ - ”。我希望它只是添加到那个。有什么想法吗？

这是jsFiddle。当你点击Xs

时，你会看到我的意思

Answer 1

不要只是添加新内容，而是抓住旧内容并将其与新内容连接起来，然后将其放入textarea中。

Answer 2

最简单的方法是在开头将tabTextRows数组初始化为：

var tabTextRows = ['--', '--', '--', '--', '--', '--'];

jsFiddle