Question

我之前已经问过这个问题，但我正在寻找基于我提供的代码的具体答案：

<script type="text/javascript">
function insertText(name, text) { var elem = document.getElementById(name); elem.innerHTML += text; }
</script>

...

<img src="/images/text1.png" onclick="insertText('textbox1', 'Text to be displayed'); insertText('textbox2', 'Text to be displayed');">
<img src="/images/text2.png" onclick="insertText('textbox1', 'Text to be displayed'); insertText('textbox2', 'Text to be displayed');">
<img src="/images/clear.png" onclick="this.form.elements['textbox1'].value = ''; this.form.elements['textbox2'].value = '';">

...

<textarea id="textbox1" name="option1"></textarea>
<textarea id="textbox2" name="option2"></textarea>

它真的没有比这更基本了（是的，我重新发现基本的html内容丢失了，我把它剥离下来以便更好地展示它）

单击事件与函数调用一起正常工作，并将文本追加到textarea。问题是当我点击“清除”图像时，没有任何反应。我看到许多人说这种方法有效的例子，但事实并非如此。单击“清除”按钮时没有任何内容清除。有什么想法吗？

Answer 1

尝试

onclick="document.getElementById['textbox1'].value = ''; document.getElementById['textbox2'].value = '';">

ID应该是唯一的，因此ID

不支持搜索元素

Answer 2

不要使用.value，而是再次使用.innerHTML。我假设this.form.elements['textbox1']与您使用textbox1更改的elem.innerHTML += text;相同。如果你使用

this.form.elements['textbox2'].innerHTML = "";

它会给你想要的结果。

但是，您可能希望切换到value。将所有对.innerHTML的引用切换为.value，它也可以正常工作。

Answer 3

要更改或更新textarea或input文本字段的内容，请不要使用innerHTML属性，而是使用value属性。

Answer 4

img不是＆＃34;表单元素＆＃34;，它没有form属性，即使它放在表单中也没有。

如果img是表单的直接子项，您可以执行以下操作：

<img src=".." onclick="this.parentElement.elements['textbox1'].value = ''; this.parentElement.elements['textbox2'].value = '';" />

A live demo at jsFiddle

如果不是，请改用document.getElementById来引用textareas。

但是，我建议您使用正确的事件处理，例如addEventListener。

elem.innerHTML += text;中的insertText()也可能阻止textareas进一步以编程方式进行编辑。使用value代替innerHTML。

Answer 5

我建议使用jQuery：

<script type="text/javascript">
$(document).load(function(){
    $("#insertText1").click(function(){
        $("#textbox1").val("Text to be displayed");
    });
    $("#insertText2").click(function(){
        $("#textbox2").val("Text to be displayed");
    });
    $("#insertTextClear").click(function(){
        $("#textbox1").val("");
        $("#textbox2").val("");
    });
});
</script>
...
<img src="/images/text1.png" id="insertText1">
<img src="/images/text2.png" id="insertText2">
<img src="/images/clear.png" id="insertTextClear">
...
<textarea id="textbox1" name="option1"></textarea>
<textarea id="textbox2" name="option2"></textarea>

清除textarea onclick

5 个答案: