title: Creating a form that outputs a string into a textarea with javascript
body: <p>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:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript"&gt;
          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 = '&lt;span style="color: #888888; font-size: xx-small;"&gt;Sources: &lt;/span&gt;' + '&lt;a href=' + lnk1 + 'target="_blank"&gt;&lt;span style="color: #2200fc; font-size: xx-small;"&gt;' + src1 + '&lt;/span&gt;&lt;/a&gt;'
  
              document.outputArea.value = outputValue;
          }
          console.log(writeCode);
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;form name="sources"&gt;
          Source 1 &lt;input type="text" id="src1"/&gt;
              Link 1 &lt;input type="text" id="lnk1"/&gt;&lt;/br&gt;
          Source 2 &lt;input type="text" id="src2"/&gt;
              Link 2 &lt;input type="text" id="lnk2"/&gt;&lt;/br&gt;
          Source 3 &lt;input type="text" id="src3"/&gt;
              Link 3 &lt;input type="text" id="lnk3"/&gt;&lt;/br&gt;
          Source 4 &lt;input type="text" id="src4"/&gt;
              Link 4 &lt;input type="text" id="lnk4"/&gt;&lt;/br&gt;
          Source 5 &lt;input type="text" id="src5"/&gt;
              Link 5 &lt;input type="text" id="lnk5"/&gt;&lt;/br&gt;
          Source 6 &lt;input type="text" id="src6"/&gt;
              Link 6 &lt;input type="text" id="lnk6"/&gt;&lt;/br&gt;
          Source 7 &lt;input type="text" id="src7"/&gt;
              Link 7 &lt;input type="text" id="lnk7"/&gt;&lt;/br&gt;
          Source 8 &lt;input type="text" id="src8"/&gt;
              Link 8 &lt;input type="text" id="lnk8"/&gt;&lt;/br&gt;
          Source 9 &lt;input type="text" id="src9"/&gt;
              Link 9 &lt;input type="text" id="lnk9"/&gt;&lt;/br&gt;
          Source 10 &lt;input type="text" id="src10"/&gt;
              Link 10 &lt;input type="text" id="lnk10"/&gt;&lt;/br&gt;
          &lt;input type="button" value="Write my code!" onclick="writeCode();"/&gt;&lt;/br&gt;
          &lt;textarea style="width:600px;height:300px;" name="outputArea" id="outputArea"&gt;&lt;/textarea&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>Thanks!</p>