Question

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

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

谢谢！

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

Javascript：将多个表单输入打印到textarea

1 个答案: