5

我正在使用 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 编写），一切正常。我<!DOCTYPE html5>按照 Uooo 的建议进行了尝试，尝试重置浏览器，但在 localhost 上仍然没有运气。

这是一个屏幕截图：

错误截图

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

4

4 回答 4

4

name已经是一个全局属性（ 的属性window），不仅如此，它还有点类型化（String）。 var name = ...本质上和说的一样window.name = ...。使用另一个实际上尚未使用的变量名称，你应该没问题。

于 2013-10-23T11:30:45.827 回答
0

我建议以下更改后的版本，该版本符合我的预期

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>

解释

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

隐式修复的问题

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

剩下的问题

  • 对密码字段使用 type="password"。

  • 使用 value 属性来默认输入类型值。

  • 更好地使用 div 元素来垂直布局输入元素而不是 br 元素。

于 2013-10-23T11:16:10.183 回答
0

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

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

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

于 2013-10-23T10:58:56.107 回答
-1

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

<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 是一项艰巨的任务，很多话题都在谈论这个问题。

于 2013-10-23T10:33:25.903 回答