javascript - 更改/追加文本区域中的值

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/但只想要文本区域而不是使用输入字段

Answer 1

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

编辑:

JS 代码的更改:

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

这是工作 plunkr