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

want to display two variables using document.getelementbyid

本文关键字：两个 变量 显示 document getelementbyid      更新时间：2024-03-16

我想创建一个表单字段。然后在页面加载时在其中显示两个变量（已赋值）。我知道我可以使用"<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>

您的代码中有几个问题

  1. input type = "number"，但您正试图将字符串设置为其值。这是行不通的。因此，将输入类型更改为文本
  2. one&two是变量，因此不存在one.value和two.value。只需one + two即可
  3. 必须使用.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();

点击此处查看演示

input元素没有innerHTML属性。您想要设置value属性，如下所示：

document.getElementById("formField").value = z;

其他需要注意的事项：

  • 您将x设置为one，将y设置为two，然后直接使用one和two。有CCD_ 21和CCD_
  • one和two实际上并没有value属性——它们只是字符串
  • 别忘了在那些字符串之间留一个空格。你想要的似乎是one + " " + two（注意引号之间的空格），否则你的输出将是JohnSmith

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

相关文章：