Question

我有一个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/

Answer 1

不确定为什么会这样，但这里有几个可能的修复：您可以使用值来添加和清除：而不是使用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中，你正试图访问你的textarea，如document.textArea - 如果我没有遗漏某些东西，它只是IE的功能，它可以使用ID而不是名称。最好使用跨浏览器的document.getElementById。

Answer 2

您的代码中存在一些错误。我修改了它......

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

<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>

如何使用onclick方法清除textarea值

2 个答案: