Javascript：将多个表单输入到textarea

我对JavaScript很陌生，但我正在尝试创建一个简单的程序，它使我编辑博客的格式源变得非常简单。我希望用户输入到表单中的信息可以打印到一个textarea中。这是我迄今为止：Javascript：将多个表单输入到textarea

<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，但它返回一个错误，如'Can not assign value null。'。有关如何解决此问题的任何建议？

谢谢！

来源

2013-12-11 user3070330

我想出这个：

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/

来源

2013-12-11 00:37:27

这正是我一直在寻找！非常感谢，凯尔。 – user3070330

不是问题，很高兴我可以帮助:) –

Javascript：将多个表单输入到textarea

回答

相关问题