Javascript：将多个表单输入打印到文本区域答案

【问题标题】：Javascript: Print multiple form inputs to a textareaJavascript：将多个表单输入打印到文本区域
【发布时间】：2013-12-11 08:37:27
【问题描述】：

我对 javascript 很陌生，但我正在尝试创建一个简单的程序，使我编辑的博客的格式化源代码变得非常容易。我希望将用户在表单中输入的信息打印到一个文本区域中。这是我目前所拥有的：

<html>
<head>
 <script type="text/javascript">
    function writeCode() {
        var src1 = document.getElementById('src1').value,
            src2 = document.getElementById('src2').value,
            src3 = document.getElementById('src3').value,
        var lnk1 = document.getElementById('lnk1').value,
            lnk2 = document.getElementById('lnk2').value,
            lnk3 = document.getElementById('lnk3').value,
        outputValue = '<span style="color: #888888; font-size: xx-small;">Sources: </span>' + '<a href="' + lnk1 + '"target="_blank"><span style="color: #2200fc; font-size: xx-small;">' + src1 + '</span></a>'  + ', ' + '<a href="' + lnk2 + '"target="_blank"><span style="color: #2200fc; font-size: xx-small;">' + src2 + '</span></a>'
        document.getElementById('outputArea').value = outputValue;

        if (src3.length + lnk3.length != 0){
            outputValue2 = ', ' + '<a href="' + lnk3 + '"target="_blank"><span style="color: #2200fc; font-size: xx-small;">' + src3 + '</span></a>'
            document.getElementById('outputArea2').value = outputValue2;
        }
        else {
            document.getElementById('outputArea2').value = ' '
        }
    console.log(writeCode);
</script>
</head>
<body>
    <form name="sources">
            Source 1 <input type="text" id="src1"/>
                Link 1 <input type="text" id="lnk1"/></br>
            Source 2 <input type="text" id="src2"/>
                Link 2 <input type="text" id="lnk2"/></br>
            Source 3 <input type="text" id="src3"/>
                Link 3 <input type="text" id="lnk3"/></br>
            <input type="button" value="Write my code!" onclick="writeCode();"/>
            <input type="button" value="Cite another article!" onClick="window.location.reload()"/></br>

            <textarea style="width:600px;height:100px;" name="outputForm">
                <p id="outputArea"></p>
                <p id="outputArea2"><p>
                <p id="outputArea3"></p>
            </textarea>
    </form>
</div>
 </body>

现在，我通过为每个文本区域分配一个单独的 ID 来处理多个文本区域。但我的目标是将所有输入的输入打印在一个区域中。我还尝试将 ID outputArea 分配给 textarea，然后将它们全部打印到 outputArea，但它返回一个错误，例如“无法分配值 null”。关于如何解决这个问题的任何建议？

谢谢！

【问题讨论】：

标签： javascript html textarea

【解决方案1】：

我想出了这个：

HTML：

<form name="sources">Source 1
    <input type="text" id="src1" />Link 1
    <input type="text" id="lnk1" />
    </br>Source 2
    <input type="text" id="src2" />Link 2
    <input type="text" id="lnk2" />
    </br>Source 3
    <input type="text" id="src3" />Link 3
    <input type="text" id="lnk3" />
    </br>
    <input type="button" value="Write my code!" onclick="writeCode();" />
    <input type="button" value="Cite another article!" onClick="window.location.reload()" />
    </br>
    <textarea style="width:600px;height:100px;" name="outputForm" id="outputForm">    </textarea>
</form>

JS：

function writeCode() {
    var src1 = document.getElementById('src1').value,
    src2 = document.getElementById('src2').value,
    src3 = document.getElementById('src3').value,
    lnk1 = document.getElementById('lnk1').value,
    lnk2 = document.getElementById('lnk2').value,
    lnk3 = document.getElementById('lnk3').value,
    outputValue = '<span style="color: #888888; font-size: xx-small;">Sources: </span>' + '<a href="' + lnk1 + '"target="_blank"><span style="color: #2200fc; font-size: xx-small;">' + src1 + '</span></a>' + ', ' + '<a href="' + lnk2 + '"target="_blank"><span style="color: #2200fc; font-size: xx-small;">' + src2 + '</span></a>';

    if (src3.length != 0 && lnk3.length != 0) {
        outputValue += ', ' + '<a href="' + lnk3 + '"target="_blank"><span style="color: #2200fc; font-size: xx-small;">' + src3 + '</span></a>';
    }
    document.getElementById('outputForm').value = outputValue;
}

您需要小心控制台中显示的错误，其中一些可能不会导致页面崩溃，但肯定会导致您尝试执行的操作出现问题。

小提琴： http://jsfiddle.net/KyleMuir/kRRBR/1/

【讨论】：

这正是我想要的！非常感谢，凯尔。
没问题，很高兴能帮上忙 :)