更改/附加文本区域中的值

Question

I am trying to pass-on values from a dropdown to the textarea.

The non-working code is:

<form name="f">
    <textarea id="change" name="change"></textarea>
    <br/>   
    <input id="docname" name="docname" type="text" list="docs" />
    <datalist id="docs">
        <option value="data1">
        <option value="data2">
        <option value="data3">
        <option value="data4">
        <option value="data5">
        <option value="dta6">
    </datalist>
</form>

<script type="text/javascript">
    document.forms['f'].elements['docname'].onchange = function(){
        document.getElementById("change").value += this.value + ', ';   
        document.forms['f'].elements['docname'].value = '';
    };                 
</script>

However if I use Input instead of Textarea the code works as intended.

The working code:

<form name="f">
    <input id="change" name="change" value="">
    <input id="docname" name="docname" type="text" list="docs" />
    <datalist id="docs">
        <option value="data1">
        <option value="data2">
        <option value="data3">
        <option value="data4">
        <option value="data5">
        <option value="dta6">
    </datalist>
</form>

<script type="text/javascript">
    document.forms['f'].elements['docname'].onchange = function(){
        document.getElementById("change").value += this.value + ', ';   
        document.forms['f'].elements['docname'].value = '';
    };                 
</script>

How can I use Textarea in place of Input and make the code work. I need to use textarea as I need multiple lines of text.

PS: I am trying to create this http://jsfiddle.net/sumitcbrty/7zqn6j3u/2/ but just want textarea instead of using input field

Answer 1

You should use innerHTML property rather than the value property. You should put logs in your code to debug it and view those messages in Developers Console.

EDIT:

Change in JS Code:

document.getElementById("txtArea").innerHTML += this.value + ', ';

Here is the working plunkr