如何使用onclick方法清除textarea值

How to clear the textarea value using onclick method

本文关键字：textarea 清除 方法 何使用 onclick      更新时间：2023-09-26

我有一个listBox，当选择它时，它将在textArea中打印，旁边我给了一个清除按钮，所以当点击textArea的值必须被清除时，它工作得很好，现在的问题是，在清除textArea中的值后，当我再次选择listBox时，该值没有打印在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/

不知道为什么它是这样工作的，但这里有一些可能的修复:您可以使用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/

或者您可以使用remove子节点来清除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/

此外，在你的代码中有一行obj.appendChild(openP);，但我没有看到它在代码中可用，所以我删除了它。

另一个时刻:在你的clearTextArea中，你试图访问你的文本区域，如document.textArea -如果我没有错过什么，它是IE唯一的功能，它与id而不是名称一起工作。最好使用文档。getElementById是跨浏览器的

您的代码中有一些错误。我已经修改了…

现在您可以清除数据了。请参考以下代码:

<html>
<body>
<script>
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 textArea = document.getElementById("expTextId");
 while (textArea.firstChild) {
            textArea.removeChild(textArea.firstChild);
        }
} 
</script>
<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()">
</body>
</html>
相关文章：