I know this question has been asked before, but I am looking for a specific answer based on the code I'm providing:

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

It really doesn't get any more basic than this (and yes I relize there is basic html stuff missing, I stripped it down to show it better)

The click events work fine with the function call and append the text to the textarea. The problem is when I click the 'clear' image, nothing happens. I see many examples where people say this works, but it doesn't. Nothing clears when I click the 'clear' button. Any thoughts?

I know this question has been asked before, but I am looking for a specific answer based on the code I'm providing:

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

It really doesn't get any more basic than this (and yes I relize there is basic html stuff missing, I stripped it down to show it better)

The click events work fine with the function call and append the text to the textarea. The problem is when I click the 'clear' image, nothing happens. I see many examples where people say this works, but it doesn't. Nothing clears when I click the 'clear' button. Any thoughts?

• javascript
• html
• button
• textarea

• Do you have a form somewhere? – hex494D49 Commented Jul 17, 2014 at 18:50
• img is not a "form element", it has not form property, not even if it was placed within a form. – Teemu Commented Jul 17, 2014 at 18:53
• Change this <textarea name="textbox1"></textarea> – hex494D49 Commented Jul 17, 2014 at 18:56
• This is true Teemu, however if that's the case then why do the buttons to add the text work fine? – user3715740 Commented Jul 17, 2014 at 18:58
• @hex Yes there are working form tags present in the original – user3715740 Commented Jul 17, 2014 at 18:59

5 Answers 5

Try

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

ID should be unique, so elements is not supported for search by ID

img is not a "form element", it has not form property, not even if it was placed within a form.

If the img is a direct child of the form, you can do something like this:

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

A live demo at jsFiddle.

If it's not, use document.getElementById instead to refer textareas.

However, I'd suggest you to use proper eventhandling, for example addEventListener.

Also elem.innerHTML += text; in insertText() may block the textareas from further programmatically edits. Use value instead of innerHTML.

To change or update the contents of a textarea or input text field, you don't use the innerHTML property, you use the value property.

Instead of using .value, just use .innerHTML again. I am assuming this.form.elements['textbox1'] is the same as the textbox1 you are changing with the elem.innerHTML += text;. If you use

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

it will give you the desired results.

However, you may want to switch to value. Switch all references to .innerHTML to .value and it will also work.

I would remed to use 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>