javascript 如何使用 onclick 方法清除 textarea 值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14038814/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear the textarea value using onclick method
提问by madhu
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,
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:
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:
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.
清除 textArea 中的值后，如果我再次单击 listBox 值并添加它，它不会被添加。请帮助...这是无法正常工作的实现，可能是因为我第一次使用它，我可能是错的。
采纳答案by Viktor S.
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:
不知道为什么它会这样工作，但这里有几个可能的修复方法：您可以使用 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='';
}
Demo: http://jsfiddle.net/8dHf5/17/
演示：http: //jsfiddle.net/8dHf5/17/
Or you can use remove child nodes to clear values of textarea:
或者您可以使用删除子节点来清除 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/
演示：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.
此外，obj.appendChild(openP);您的代码中有一行，但我没有看到它在代码中可用，因此我将其删除。
Another moment: in your clearTextAreayou 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.
另一个时刻：在您clearTextArea尝试访问您的 textarea 时，例如document.textArea- 如果我没有遗漏某些东西，它是 IE 的唯一功能，它可以使用 ID 而不是名称。最好使用跨浏览器的 document.getElementById。
回答by Sky5005e
There was some mistake in your code. I have modified it...
您的代码中有一些错误。我已经修改了...
Now you are able to clear data. Please refer below code:
现在您可以清除数据了。请参考以下代码：
<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>
