在 textarea 中更改/附加值

Question

我正在尝试将下拉列表中的值传递到文本区域。

无效的代码是：

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

但是，如果我使用 Input 而不是 Textarea，代码会按预期工作。

工作代码：

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

如何使用Textarea 代替Input 并使代码正常工作。我需要使用textarea，因为我需要多行文本。

PS：我正在尝试创建这个 http://jsfiddle.net/sumitcbrty/7zqn6j3u/2/，但只想要 textarea 而不是使用输入字段

Answer 1

您应该使用 innerHTML 属性而不是 value 属性。 您应该将日志放入代码中以对其进行调试并在 Developers Console 中查看这些消息。

编辑：

JS代码变化：

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

这是工作的plunkr