「對象HTMLTextAreaElement」出現在屏幕上的輸出

Question

我正在創建一個窗體，在第二個字段中添加了第二個輸出字段，它具有不同的格式，我在代碼中放置了一個示例。現在我已經部分工作了，但有兩個問題出現。

1. 首先，它首先在輸出字段中返回[對象HTMLTextAreaElement]響應，而不是放置我想要的輸出。我無法弄清楚爲什麼它首先添加[對象HTMLTextAreaElement]。

2. 其次，我第一次使用窗體，除了[對象HTMLTextAreaElement]，它確實有效。但是，當我使用「重置」按鈕時，它實際上似乎沒有「清除」來自第一個字段的輸出，因爲它似乎記住了前一次輸入的任何內容，儘管已被重置。除了沒有返回被重置之前輸入的信息之外，我確實需要第二個輸出字段進行編碼。我希望這是有道理的。

3. 最後，有沒有什麼方法可以讓一個按鈕輸出結果到兩個輸出框？如果我必須使用兩個按鈕，這不是世界末日，但如果我能將它們合併爲一個，那將會很棒。就像我現在設置的那樣，我知道我已經從第一個輸出中抓取了輸入的文本，而不是將它轉換爲第二個輸出。所以也許這不是一個超級簡單的修復。

此外，請不要JQuery修復，只是JavaScript和HTML。我想要單頁上的所有代碼。請有人幫忙，我一直堅持這幾個小時，沒有任何我試圖解決它的工作。

這裏是我的HTML

<table width="100%" height="700" border=0> 
<tr> 
    <td width=550 valign=top> 

<form name="Form1" onsubmit="return false;" action=""> 
      Name: 
     <br> 
<input type="text" name="Name" id="name" placeholder="Name"><br> 
      Number: 
     <br> 
<input type="text" name="Number" id="number" placeholder="Number"><br> 
      Question: 
     <br> 
<input type="text" name="Question1" id="questionOne" placeholder="Answer"> 
     <br> 
      Question: 
     <br> 
<select type="drop" name="Question2" id="questionTwo"> 
    <option value="Select Yes or No">...</option> 
    <option value="Yes">Yes</option> 
    <option value="No">No</option> 
</select><br> 
      Enter some text? 
     <br> 
<textarea type="textarea" name="Sometext" id="someText" placeholder="Type 
something" 
cols="70" rows="3"></textarea><br> 

      Question: 
     <br> 

<select type="drop" name="Question3" id="questionThree"> 
    <option value="Select Yes or No">...</option> 
    <option value="Yes">Yes</option> 
    <option value="No">No</option></select> 


     <br> 
      Question: 
      <br> 

    <select type="drop" name="Question4" id="questionFour"> 
    <option value="Select Yes or No">...</option> 
    <option value="Yes">Yes</option> 
    <option value="No">No</option></select> 
     <br> 

     Enter more text:<br> 
<textarea type="textarea" name="Story" id="story" placeholder="Type me a 
story" 
cols="70" rows="10"></textarea> 
<br> 

    </td> 
    <td valign="top"> 

      <table border=0 height=100% ><tr><td valign="top" height=410> 

<textarea type="textarea" name="output" onclick="this.focus();this.select()" 
id="output" cols="70" rows="25" placeholder="Name: 
Number: 
Answer: 
Answer:&#x0a; 
Some text:&#x0a; 
Answer:&#x0a; 
Answer:&#x0a 
A little story:"></textarea> 
<br> 

      </td> 
     </tr> 
     <tr> 
      <td valign=top> 

<div class="btn-group"> 
    <button value="Combine" onclick="convert()" id="combine1"> 
     Combine 
    </button><br><br> 
</div> 




     <textarea type="textarea" id="secondOutput" name="output" 
onclick="this.focus();this.select()" cols="70" rows="15" placeholder="Three 
Lines 
Down 
Name: 
Number: 
Answer: 
Answer: 
Some text: 
Answer: 
Answer: 
A little story:"></textarea> 


    <div class="btn-group"> 
    <button value="Combine" onclick="NoteStart()" id="combine1"> 
     Second copy 
    </button><br><br> 
</div> 

      </td> 
     </tr> 
     <tr> 
      <td align="right"> 

        <table width=25% height=100% border=0> 
         <tr> 
          <td valign="bottom"> 

<div class="btn-group"> 
    <button type="reset" value="Reset form"> 
     Reset form 
    </button> <br><br> 
</div> 

</form></div> 

          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

是的，我知道，表，對不起......

和腳本

<script> 
function wordwrap(str, width, brk, cut) { 
brk = brk || '\n'; 
width = width || 60; 
cut = cut || false; 

if (!str) 
return str; 

var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : 
'|\\S+?(\\s|$)'); 
return str.match(RegExp(regex, 'g')).join(brk); 
} 



function convert() { 
var name = document.getElementById("name").value; 
var number = document.getElementById("number").value; 
var questionOne = document.getElementById("questionOne").value; 
var questionTwo = document.getElementById("questionTwo").value; 
var someText = document.getElementById("someText").value; 
var questionThree = document.getElementById("questionThree").value; 
var questionFour = document.getElementById("questionFour").value;  
var story = document.getElementById("story").value; 


var output = ""; 
output += "Name: " + name + "\n"; 
output += "Number: " + number + "\n"; 
output += "Answer: " + questionOne + "\n"; 
output += "Answer: " + questionTwo + "\n\n"; 
output += "Some text: " + someText + "\n\n"; 
output += "Answer: " + questionThree + "\n\n"; 
output += "Answer: " + questionFour + "\n\n"; 
output += "A little story: " + story + ""; 


document.getElementById("output").value = output; 
} 

</script> 

<script> 

function NoteStart() { 
var input = document.getElementById("output").value; 
input = input.replace(/\r/g, '').replace(/\n\n+/g, '\n'); 
input = wordwrap(input, 60, '\n', true); 

var data = input.replace(/[ \n\t\r]+$/g, '').split(/\n+/); 

var StartNS = ""; 

for (var i=0; i<data.length; i++) { 
    if (i%10==0) { 
     if (i>0) 
      output += "\n"; 

     output += "Three\nLines\nDown\n"; 
    } 

    output += data[i]+"\n"; 
} 

output += (data.length%10>0) ? "\n\n" : "\n"; 

document.getElementById("secondOutput").value = output; 
} 
</script> 

正如我所說的，我一直在試圖解決這一問題我自己現在有一段時間了，但我很難過。感謝任何幫助。在這裏，我做了它的的jsfiddle這裏https://jsfiddle.net/s8qhezmx/所以任何人都可以看到什麼工作

Answer 1

在你function NoteStart()把var output = "";

function NoteStart() { 
    var output = ""; 

    // stuff 
} 

的output變量，你指的是在此之前的聲明是包含output全局對象HTMLElement對象<textarea id="output">這就是爲什麼你在得到[object HTMLTextAreaElement]時做output += //stuff在循環中造成你的問題。

希望幫助

UPDATE：

the reason why there are global variables that are named with an elements ID and contains the JavaScript object reference of the element