javascript - 如何使用onclick方法清除textarea值

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问题是，在清除 textArea 中的值并再次选择列表框时，该值没有打印在 textArea 上。可能是什么问题？这是代码，

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='';

} 

清除 textArea 中的值后，如果我再次单击 listBox 值并添加它，它不会被添加。请帮助...这是无法正常工作的实现，可能是因为我是第一次使用它，我可能是错的。

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

Answer 1

不确定为什么会这样，但这里有一些可能的修复方法:您可以使用 value 来添加和清除，而不是使用 append(添加新的聚合函数):

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

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

演示:http://jsfiddle.net/8dHf5/17/

或者你可以使用移除子节点来清除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);
            }

     }
​

演示:http://jsfiddle.net/8dHf5/14/

此外，您的代码中有一行 obj.appendChild(openP);，但我没有看到它在代码中可用，因此我将其删除。

另一个时刻:在您的 clearTextArea 中，您正在尝试像 document.textArea 一样访问您的文本区域 - 如果我没有遗漏任何东西，那是 IE 的唯一功能，它使用 id 而不是名称。最好使用跨浏览器的 document.getElementById。