Javascript:将多个表单输入打印到一个文本区域

Javascript: Print multiple form inputs to a textarea

本文关键字：一个 区域 文本 打印 表单 输入 Javascript      更新时间：2024-06-05

我对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分配给文本区域，然后将它们全部打印到outputArea，但它返回了一个错误，如"Cannot assign value null"有什么建议吗？

谢谢！

我想出了这个：

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/

相关文章：