Question

如何从myTextbox获取价值并输出到<p>？

为什么我收到错误消息：[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>

Answer 1

您收到此错误消息是因为 x是object 。这意味着他很复杂（文本框包含value，name，onclick等）并且不知道如何/代表什么string。结果是他的type [object HTMLInputElement]。

要获得value 的 object，您必须访问x.value属性。

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

Answer 2

要从控制中提取数据，您必须使用.value

试试这个

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

Answer 3

使用.value：

访问输入中的文字

＆＃13;

<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>

＆＃13;

为了好玩，您可以自动更新<p>：

＆＃13;

<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>

＆＃13;

Answer 4

您需要获取文本框的值，然后将其提供给段落标记。您收到错误是因为您试图在段落中插入文本框。

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>

Answer 5

<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>

Answer 6

您错过了input field的价值，试试这个fiddle

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

从文本框中获取值并输出

6 个答案: