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>
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>To extract data from control you have to use .value
Try like this
var x = document.getElementById("myTextbox");
document.getElementById("myOutput").innerHTML = x.value;
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>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>
<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>
You have missed out the value of the input field, Try this fiddle
var x = document.getElementById("myTextbox").value;
