將用戶輸入從文本框添加到新元素

Question

我想爲用戶添加一個字段來輸入文本，並將該文本添加到顯示在當前div中的新段落元素。

但是，我正在接收[object]而不是用戶輸入。這是因爲它還不是字符串值嗎？我一直在嘗試將我的對象轉換爲一個字符串，我不斷返回錯誤。

function addText(){ 
    var newParagraph = document.createElement('p'); 
    var input = document.getElementById('userInput'); 

    newParagraph.className = 'red'; 
    newParagraph.appendChild(document.createTextNode(input)); 
    document.getElementById('content').appendChild(newParagraph); 
} 

function getText(){   
     addText(); 
} 

我正在使用「userInput」的輸入ID並使用onClick = "getText()"觸發按鈕上的功能。該腳本正常工作，除了返回[object]而不是userInput文本。

HTML：

<input type="text" id="userInput" /> 
<button id="button" onClick="getText()">Insert Text</button> 

Answer 1

你需要獲得的輸入值，現在你整個輸入爲對象分配給您var input，所以它應該是：

var input = document.getElementById('userInput').value;