CODEWITHSUNDEEP
javascript
Ming
Ming

Reputation: 109

Get value from textbox and output it

How to get value from myTextbox and output to <p>?

Why I got the error message: [object HTMLInputElement]

<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>

<script>
function myFunction() {
    var x = document.getElementById("myTextbox");
    document.getElementById("myOutput").innerHTML = x;
}
</script>

Upvotes: 3

Views: 178

Answers (6)

stanze
stanze

Reputation: 2480

You have missed out the value of the input field, Try this fiddle 

var x = document.getElementById("myTextbox").value;

Upvotes: 0

user1823
user1823

Reputation: 1111

Access the text in the input using .value:

<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>

<script>
function myFunction() {
    var x = document.getElementById("myTextbox");
    document.getElementById("myOutput").innerHTML = x.value;
}
</script>

For fun, you can update the <p> automatically:

<input type="text" id="myTextbox" onchange="myFunction()" onkeyup="this.onchange();">
<p id="myOutput"></p>

<script>
function myFunction() {
    var x = document.getElementById("myTextbox");
    document.getElementById("myOutput").innerHTML = x.value;
}
</script>

Upvotes: 1

adricadar
adricadar

Reputation: 10219

You get this error message because x is an object. This means that he is complex (textbox have value, name, onclick, etc) and don't know how/what to be represented as string. The result is his type [object HTMLInputElement].

To get the value of the object you have to acces x.value property.

function myFunction() {
    var x = document.getElementById("myTextbox");
    document.getElementById("myOutput").innerHTML = x.value;
}
<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>

Upvotes: 3

MrAksh
MrAksh

Reputation: 1

<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>

<script>
    function myFunction() {
        var x = document.querySelector("#myTextbox");
        document.querySelector("#myOutput").innerHTML = x.value;
    }
</script>

Upvotes: 0

Dhruv Pandya
Dhruv Pandya

Reputation: 67

You need to fetch value of textbox and then feed it to the paragraph tag. You got the error because you are trying to insert textbox in paragraph.

function myFunction() {
    var x = document.getElementById("myTextbox");
    document.getElementById("myOutput").innerHTML = x.value;
}
<input type="text" id="myTextbox">
<input type="button" id="myButton" value="Run" onclick="myFunction()">
<p id="myOutput"></p>

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

To extract data from control you have to use .value

Try like this

var x = document.getElementById("myTextbox");
document.getElementById("myOutput").innerHTML = x.value;

Upvotes: 1

Related Questions