Question

我想创建一个表单字段。然后在页面加载自身时，在其中显示两个变量（已分配值）。我知道我可以使用“<input id="formField" value="John Smith"/>但我想使用document.getElementById来执行此操作。我的代码出了什么问题？

表单字段加载，但它是空的。

我是JS的新手......

<!doctype html>
<html>

<body>
<input type="number" id="formField"/>

<script>

var one = "John";
var two = "Smith";

function concat() {
var x = one.value;
var y = two.value;
var z = one + "" + two;
    document.getElementById("formField").innerHTML = z; 
                                                   //Why doesn't this work?

}

concat();

</script>
</body>
</html>

Answer 1

您的代码中存在几个问题

input type = "number"但您正在尝试将字符串设置为其值。哪个不行。因此，将输入类型更改为文本
one＆amp; two是变量，因此没有one.value和two.value。只需one + two即可
您必须使用.value代替innerHTML将值重新输入输入

<强> HTML

<input type="text" id="formFieldText" value=""/>

JS

var one = "John";
    var two = "Smith";

    function concat() {

    var x = one;
    var y = two;
    var z = one + " " + two;
    console.log(z)
        document.getElementById("formFieldText").value = z; 
    }

    concat();

Click here for demo

Answer 2

http://jsbin.com/buroxaciba/edit?html,output
innerHTML通常用于div，span，p和类似元素输入类型编号 - ＆gt;文本

想要使用document.getelementbyid显示两个变量

2 个答案: