创建一个使用javascript将字符串输出到textarea的表单

时间:2013-12-05 13:09:07

标签: javascript

我对javascript很新,但我正在尝试创建一个简单的程序,使我编辑的博客的格式化源非常容易。我希望用户在表单中输入的信息打印到textarea中。这是我到目前为止所做的:

<html>
<head>
    <script type="text/javascript">
        function writeCode() {
            var src1 = document.getElementById('src1').value;
                // src2 = document.getElementbyId('src2'),
                // src3 = document.getElementbyId('src3'),
                // src4 = document.getElementbyId('src4'),
                // src5 = document.getElementbyId('src5'),
                // src6 = document.getElementbyId('src6'),
                // src7 = document.getElementbyId('src7'),
                // src8 = document.getElementbyId('src8'),
                // src9 = document.getElementbyId('src9'),
                // src10 = document.getElementbyId('src10'),
            var lnk1 = document.getElementById('lnk1').value;
                // lnk2 = document.getElementbyId('lnk2'),
                // lnk3 = document.getElementbyId('lnk3'),
                // lnk4 = document.getElementbyId('lnk4'),
                // lnk5 = document.getElementbyId('lnk5'),
                // lnk6 = document.getElementbyId('lnk6'),
                // lnk7 = document.getElementbyId('lnk7'),
                // lnk8 = document.getElementbyId('lnk8'),
                // lnk9 = document.getElementbyId('lnk9'),
                // lnk10 = document.getElementbyId('lnk10');

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

            document.outputArea.value = outputValue;
        }
        console.log(writeCode);
    </script>
</head>
<body>
    <p></p>
    <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>
        Source 4 <input type="text" id="src4"/>
            Link 4 <input type="text" id="lnk4"/></br>
        Source 5 <input type="text" id="src5"/>
            Link 5 <input type="text" id="lnk5"/></br>
        Source 6 <input type="text" id="src6"/>
            Link 6 <input type="text" id="lnk6"/></br>
        Source 7 <input type="text" id="src7"/>
            Link 7 <input type="text" id="lnk7"/></br>
        Source 8 <input type="text" id="src8"/>
            Link 8 <input type="text" id="lnk8"/></br>
        Source 9 <input type="text" id="src9"/>
            Link 9 <input type="text" id="lnk9"/></br>
        Source 10 <input type="text" id="src10"/>
            Link 10 <input type="text" id="lnk10"/></br>
        <input type="button" value="Write my code!" onclick="writeCode();"/></br>
        <textarea style="width:600px;height:300px;" name="outputArea" id="outputArea"></textarea>
    </form>
</body>
</html>

当我运行代码时,我收到一条错误消息“未捕获的TypeError:无法在第28行读取未定义的属性'outputArea'”。我该如何解决这个问题?再一次,我对js很新,对任何无知都很抱歉。

我最终还希望能够仅输出已输入的数据。我该怎么做?我会使用for循环还是其他方法?

谢谢!

1 个答案:

答案 0 :(得分:1)

也许试试这个 document.getElementById('outputArea')。value = outputValue;