Question

我使用的是Chrome 30.0.1599.101，但name元素存在问题：它没有属性。

<html>
<body>
<form>
    <input name="name" id="name" type="text">*<br>
    <input name="pass" id="pass" type="text">*<br>
</form>

<script>

var name = document.getElementById("name");
var pass = document.getElementById("pass");

console.log(name); // no properties
console.log(pass); // everything ok

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

为什么name元素没有属性？这不仅是控制台问题 - 代码中无法访问属性。但是，Firefox浏览器中的一切正常。即使在小提琴（由Gurpreet Singh）使用同一浏览器中的相同代码，一切都可行。我按照Uooo的建议尝试了<!DOCTYPE html5>，尝试重置浏览器，但在localhost上仍然没有运气。

以下是截图：

error screenshot

如果我将名称name更改为其他名称，则属性可见。

Answer 1

name已经是a global property（属性为window），不仅如此，还有点类型（String）。 var name = ...与window.name = ...基本相同。使用另一个实际上尚未采用的变量名称，您应该没问题。

Answer 2

缺少<head>和<title>，也许这会有所帮助，没有它们就是无效的HTML。

jsfiddle会自动插入这些标签，这可以解释为什么它在那里工作但不在本地。

不要被绿箭回答弄糊涂，你没有关闭输入标签，但不关闭br，反之亦然。 XHTML中的所有单个标签都需要关闭才能生效，但在HTML4和HTML5中，您根本不会关闭任何单个标签。

Answer 3

我建议按照

中的预期更改版本

navigator.userAgent
"Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1678.0 Safari/537.36"

<强>代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <script>
document.addEventListener('readystatechange', function(event) {
    if (event.target.readyState !== "complete") {
        return;
    }
    var name = document.getElementById("name");
    var pass = document.getElementById("pass");
    console.log(name);
    console.log(pass);
}, false);
</script>
</head><body>
<form>
    <input name="name" id="name" type="text">*<br>
    <input name="pass" id="pass" type="text">*<br>
</form>
</body></html>

<强>解释

脚本元素应位于HTML文档的head元素中。
处理DOM的脚本代码需要在文档完全加载后运行。

隐含修正问题

脚本代码不应在全局范围内运行，其中var name和pass可能与现有变量冲突。它现在在匿名事件监听器函数的范围内运行。

剩余问题

对密码字段使用type =“password”。
使用value属性来默认输入类型值。
最好使用div元素垂直布局输入元素而不是br元素。

Answer 4

我不知道是否会导致错误，但您至少应该关闭输入

<html>
  <body>
    <form>
        <input name="name" id="name" type="text"/>*<br>
        <input name="pass" id="pass" type="text"/>*<br>
    </form>
  </body>
 </html>

小提琴也适合我......

Chrome控制台中是否有任何警告和/或错误？

您还应该在该函数中使用您的脚本：

<script>
$(function() { //shortcut for document ready

    //Get your elements here otherwise you can't be sure that dom is loaded.

});
</script>

如果你不使用jquery，那么如果你想要一个Xbrowser解决方案来检测何时加载dom是一个非常重要的任务，很多主题都在谈论它。

缺少DOM元素

4 个答案: