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

回答

相關問題