Textarea row count when value is input bye external anchor

Question

Allmost done, bus sufering whit on small thing big problem for me.

Working example http://jsfiddle.net/auvi1/QSe4M/3/

As you can see in the example clicking the link passes the value to the textarea but, I just can't get to work the row count script. It counts the rows if I click inside the text area but that's not what I want it to do, what I want is that it automatically increments the count box whenever a value is input into the textarea Does this make any sense?

<script type='text/javascript'>
    window.onload = btnsInit;

    function btnsInit() {
        var i, a = document.getElementById('btns').getElementsByTagName('a');
        for (i = 0; i < a.length; ++i) {
            a[i].onclick = btnClick;
        }
    }

    function btnClick(e) {
        document.getElementById('myTextarea').value += '' + this.firstChild.nodeValue + '\n';
        xPreventDefault(e);
        trim();
        console.log("#myTextarea =", document.getElementById('myTextarea').value);
        return false;
    }

    function xPreventDefault(e) {
        if (e && e.preventDefault) e.preventDefault();
        else if (window.event) window.event.returnValue = false;
    }

    function cuentaRenglones(area) {
        var renglones = area.value.replace((new RegExp(".{" + area.cols + "}", "g")), "\n").split("\n");
        if (renglones[renglones.length - 1] == "") renglones.length--;
        area.form.contador.value = renglones.length;
    }
</script>
<div id='btns'>
    <form>
        <textarea rows="10" id='myTextarea' style="" name=" " onclick="cuentaRenglones(this)"></textarea>
        <br>Lines:
        <input type=text name="contador" size="2" value="0">
    </form>
    <a onclick='return false' href=' '>Link1</a>
    <a onclick='return false' href=' '>Link2</a>
    <a onclick='return false' href=' '>Link3</a>
    <a onclick='return false' href=' '>Link4</a>
</div>

Answer 1

Look at this:

http://jsfiddle.net/Eb4U7/

I have changed to keyup event, but also added the command to count the lines after you click the links, otherwise it would only update the count if you edited something in the text area.

<script type='text/javascript'>
window.onload=btnsInit;
function btnsInit() {
    var i,a=document.getElementById('btns').getElementsByTagName('a');
    for(i=0;i < a.length;++i) {
        a[i].onclick=btnClick;
    }
}

function btnClick(e) {
    document.getElementById('myTextarea').value += '' + this.firstChild.nodeValue + '\n';
    xPreventDefault(e);
    cuentaRenglones(document.getElementById('myTextarea'));
    trim();
    console.log("#myTextarea =", document.getElementById('myTextarea').value);

    return false;
}

function xPreventDefault(e) {
    if(e && e.preventDefault)e.preventDefault();
    else if(window.event)window.event.returnValue=false;
}

function cuentaRenglones(area){
    var renglones = area.value.replace((new RegExp(".{"+area.cols+"}","g")),"\n").split("\n");
    if(renglones[renglones.length-1]=="") renglones.length--;
        area.form.contador.value = renglones.length;
}
</script>
<div id='btns'>
<form>
<textarea rows="10" id='myTextarea' style="" name=" "  onkeyup="cuentaRenglones(this)"></textarea>
<br>
Lines:
<input type=text name="contador" size="2" value="0">
</form>
<a  onclick='return false'href=' '>Link1</a>
<a  onclick='return false' href=' '>Link2</a>
<a  onclick='return false' href=' '>Link3</a>
<a  onclick='return false' href=' '>Link4</a>
</div>​