How to clear the textarea value using onclick method

Question

I'm having a listBox, when selected it, it will be printed in the textArea and beside to it I have given a clear button, so when clicked the value of the textArea has to be cleared, it works fine, now the problem is, after clearing the value in textArea and again when i select the listBox, the value is not getting printed on the textArea. What might be the problem? Here is the code,

HTML:

<select id="aggregationFunct" name="aggregationFunct" size="3" multiple="multiple">
<option value="Count">Count</option>
<option value="Sum">Sum</option>
<option value="Avg">Avg</option>
</select>

<input type="button" id="addToExp1Id" value="Add" onclick="addToExpText()" >
</br> </br>
<label for="expTextId" style="font-family: sans-serif; font-size: small;"> Expression    : </label>        
<textarea name="textArea" id="expTextId" readonly="readonly"> </textarea>
<input type="button" id="clearId" value="Clear" onclick="clearTextArea()">

JavaScript:

function addToExpText() {
alert("hello);
var aggreFunct = document.getElementById("aggregationFunct").value;

var obj = document.getElementById("expTextId");
var aggFun = document.createTextNode(aggreFunct);
obj.appendChild(aggFun);
obj.appendChild(openP);
}

function clearTextArea(){
 document.form1.textArea.value='';

} 

After clearing the value in the textArea, again if i click on the listBox value and add it, it is not getting added. Pls help... Here is the implementaiton which is not working properly, may be its becaus i'm using it for the first time and i might be wrong.

http://jsfiddle.net/8dHf5/5/

Solution

Not sure why it works like that, but here are few possible fixes: Instead of using append (to add a new aggregation function), you can use value both to add and clear:

function addToExpText() {
    alert("hello");
    var aggreFunct = document.getElementById("aggregationFunct").value;
    var obj = document.getElementById("expTextId").value += aggreFunct;    
}

function clearTextArea(){
            document.getElementById("expTextId").value='';              
}

Demo: http://jsfiddle.net/8dHf5/17/

Or you can use remove child nodes to clear values of textarea:

function addToExpText() {
    alert("hello");
    var aggreFunct = document.getElementById("aggregationFunct").value;
     var obj = document.getElementById("expTextId");
     var aggFun = document.createTextNode(aggreFunct);
     obj.appendChild(aggFun);    
}

function clearTextArea(){
            var myNode = document.getElementById("expTextId");
            while (myNode.firstChild) {
                myNode.removeChild(myNode.firstChild);
            }

     }
​

Demo: http://jsfiddle.net/8dHf5/14/

Besides, there is a line obj.appendChild(openP); in your code, but I do not see it being available in code, so I removed it.

Another moment: in your clearTextArea you are trying to access your textarea like document.textArea - if I'm not missing something, it is IE only feature and it works with ids instead of names. It is better to use document.getElementById which is cross browser.

Comments

[madhu]

FAngel...Thanks it worked !!! I'm using the second solution of yours, just wanted to know, why my code didn't work? and also If i'm appending any text do I need to perform .removeChild all the time??

[Viktor S.]

You have cleared some syntax errors, but actual problem is not fixed here: jsfiddle.net/8dHf5/26. This fiddle has your code. If you will add something and than clear textarea - add button will stop working.

[Viktor S.]

removeChild you should use only if you want to remove child nodes :) Frankly speaking I have no idea why textarea stop accepting new child nodes after you clear it with value = '', but anyway - I would recommend to use first solution. Reason is that you are setting a value there and adding child nodes... that is little different thing and finally you may get some problems with getting textarea value (never checked it - I always use value for things like that). Why it works like that - I would be happy to know that also)

[Viktor S.]

@madhu also, please note that your initial code had a lot of mistakes which you could notice with some kind of developer tools available for your browser (like developer tools in IE and Chrome or Firebug in FF - you can open all of them with F12). Any of those browsers have console where all errors are listed

[madhu]

hey, thank you for your valuable comments... Will look into it.