Question

I am trying to add a field for users to input text, and add that text to a new paragraph element that is displayed in my current div.

However, I am receiving [object] instead of the user input. Is this because it is not yet a string value? I have been trying to convert my object to a string and I keep returning errors.

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();
}

I am using an input id of “userInput” and triggering the function on the button with onClick = "getText()". The script is working correctly, except returning [object] instead of the userInput text.

HTML:

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

Answer 1

You need to get the value of the input, right now you assign the whole input as an object to your var input, so it should be:

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