Creating a form that outputs a string into a textarea with javascript

Question

I'm very new to javascript but I'm trying to create a simple program that makes formatting sources for the blog I edit very easy. I want the information that users type into the form to be printed out into the textarea. Here's what I have so far:

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

I get an error saying "Uncaught TypeError: Cannot read property 'outputArea' of undefined on line 28" when I run the code. How can I resolve this? Again, I'm very new to js, so sorry for any ignorance.

I also eventually want to be able to output only data that has been entered. How would I do this? Would I use a for loop, or some other method?

Thanks!

Nevermind! I changed "document.outputArea.value = outputValue;" to " document.getElementById('outputArea.value') = outputValue;" and it worked fine. I'd still like to know the best way to output only data that has been entered though, so I'll leave this up for now. — user3070330
– user3070330, Commented Dec 5, 2013 at 13:14
Have you tried document.getElementById('outputArea').value? And for ignoring any sources that haven't been entered, you could look into onChange events for textfields, or if statements. — jonhopkins
– jonhopkins, Commented Dec 5, 2013 at 13:14
I'm slightly skeptical of document.getElementById('outputArea.value') working. Is that your actual code? If that does work, that's pretty cool — jonhopkins
– jonhopkins, Commented Dec 5, 2013 at 13:15
You're right. I used "document.getElementById('outputArea').value" ... sorry for the typo! — user3070330
– user3070330, Commented Dec 5, 2013 at 13:19

greko · Accepted Answer · 2013-12-05 13:14:01Z

1

Maybe try this document.getElementById('outputArea').value = outputValue;

answered Dec 5, 2013 at 13:14

greko

2252 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3070330 Over a year ago

Thanks, Greg. Worked perfectly.

Collectives™ on Stack Overflow

Creating a form that outputs a string into a textarea with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related