我之前已经问过这个问题,但我正在寻找基于我提供的代码的具体答案:
<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。问题是当我点击“清除”图像时,没有任何反应。我看到许多人说这种方法有效的例子,但事实并非如此。单击“清除”按钮时没有任何内容清除。有什么想法吗?
答案 0 :(得分:3)
尝试
onclick="document.getElementById['textbox1'].value = ''; document.getElementById['textbox2'].value = '';">
ID应该是唯一的,因此ID
不支持搜索元素答案 1 :(得分:1)
不要使用.value
,而是再次使用.innerHTML
。我假设this.form.elements['textbox1']
与您使用textbox1
更改的elem.innerHTML += text;
相同。如果你使用
this.form.elements['textbox2'].innerHTML = "";
它会给你想要的结果。
但是,您可能希望切换到value
。将所有对.innerHTML
的引用切换为.value
,它也可以正常工作。
答案 2 :(得分:1)
要更改或更新textarea
或input
文本字段的内容,请不要使用innerHTML
属性,而是使用value
属性。
答案 3 :(得分:1)
img
不是&#34;表单元素&#34;,它没有form
属性,即使它放在表单中也没有。
如果img
是表单的直接子项,您可以执行以下操作:
<img src=".." onclick="this.parentElement.elements['textbox1'].value = ''; this.parentElement.elements['textbox2'].value = '';" />
如果不是,请改用document.getElementById
来引用textareas。
但是,我建议您使用正确的事件处理,例如addEventListener
。
elem.innerHTML += text;
中的insertText()
也可能阻止textareas进一步以编程方式进行编辑。使用value
代替innerHTML
。
答案 4 :(得分:0)
我建议使用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>