2

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 ，在清除 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/

4

2 回答 2

2

不知道为什么会这样，但这里有几个可能的修复：您可以使用 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 唯一的功能，它适用于 ids 而不是名称。最好使用跨浏览器的 document.getElementById。

于 2012-12-26T10:07:11.130 回答
0

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

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

<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>
于 2012-12-26T10:04:49.197 回答