html使用javascript为输入文本赋值不起作用答案

【问题标题】：html assigning value to input text using javascript does not workhtml使用javascript为输入文本赋值不起作用
【发布时间】：2013-08-18 12:27:17
【问题描述】：

我是编程新手，遇到了一个小问题

我有一个名为“fr”的表单，一个名为“in”的输入文本框和一个值为“my text”的变量“n” 这是我的代码：

<html>
<head>
<script LANGUAGE="JavaScript">
var n = "my text";
document.fr.in.value = n;
</script>
</head>

<body>
<form name="fr">
<input name="in" size="3">
</form>
</body>
</html>

但不知何故输入“in”不显示文本“我的文本” 我一直在浏览互联网，但找不到任何有效的解决方案.. 我尝试的一切都不起作用。我想我在做一些非常简单的错误。请帮帮我。

【问题讨论】：

标签： javascript html input assign

【解决方案1】：

document.fr 在调用时还不存在；因此，它后面的所有东西也不存在，所以它会抛出一个 TypeError

TypeError: Cannot read property 'in' of undefined

要解决此问题，请使用您喜欢的方法移动要在节点存在后调用的代码

window.addEventListener('load', function () {
    var n = "my text";
    document.fr.in.value = n;
});

我会进一步指出；

查找元素的首选方法是为其指定一个id属性并使用document.getElementById。 id 必须是唯一的。
使用<script>的language属性是depreciated，如果要指定语言，使用type属性type="text/javascript"或type="application/javascript"
Opening the Console 当脚本未按预期工作时，通常会立即向您显示原因。这通常使用 F12 完成。

【讨论】：

【解决方案2】：

您应该在定义表单后初始化脚本，正如 Paul S. 在他的回答中所解释的那样。所以你可以这样做，

<html>
<head>
</head>

<body>
<form name="fr">
<input name="in" size="3">
</form>

<script type="text/javascript">
var n = "my text";
document.forms.fr.in.value = n;
</script>
</body>
</html>

这将在定义表单后运行脚本。或者将此代码放在某个函数中，并在表单定义（即加载）后实例化该函数。

【讨论】：

这仍然会抛出相同的 TypeError

【解决方案3】：

正如 Paul 指出的，只有在确定感兴趣的元素已经加载时，才应该尝试获取页面元素。因此，在这种情况下，您可以通过在页面完全加载时运行代码并获取对输入的引用来设置输入字段的值，如下所示：

window.addEventListener("load", function () {
    var n = "my text";
    var myInput = document.getElementsByName("in");
    myInput[0].value = n;
});

注意，因为getElementsByName() 返回一个数组，所以您必须使用 [0] 来获取第一个元素。

【讨论】：

TypeError: Cannot set property 'value' of undefined