javascript - 将文本框中的用户输入附加到新元素

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;