0

可能重复：
为什么 jQuery 或诸如 `getElementById` 之类的 DOM 方法找不到元素？

我确信这很明显，但是 2 小时的头部撞击。试图从我的每个选择框中获取值：

<table>
<tr><td>Team</td><td>Games</td><td>Players</td></tr>
<tr><td><div id="selTeam">
<select name="teams" id="teams" onChange="sndReq(this)"  >
  <option value="-1">-- Not Set --</option>
</select>
</div></td>
<td><div id="selGames">
<select name="games" id="games" onChange="sndReq(this)" )" >
  <option value="-1">-- Not Set --</option>
</select>
</div></td>
<td><div id="selPlayers">
<select name="players" id="players" onChange="sndReq(this)" )" >
  <option value="-1">-- Not Set --</option>
</select>
</div></td></tr>
</table>

这是我正在使用的 javascript，getElementById 一直返回 null。

        var selbox = document.getElementById("teams");
        var idx = selbox.selectedIndex;
        var teamValue = selbox.options[idx].value;

        var selbox = document.getElementById("games");
        var idx = selbox.selectedIndex;
        var gameValue = selbox.options[idx].value;

        var selbox = document.getElementById("players");
        var idx = selbox.selectedIndex;
        var playerValue = selbox.options[idx].value;

我试图不使用 JQuery。

谢谢！

4

2 回答 2

1

这些是document.getElementById("teams");可能返回的一些原因null：

  1. 文档中没有带有 的对象id="teams"。
  2. 在加载内容之前，您在文档加载过程中过早地运行代码。<body>您可以在相关内容的末尾运行此代码。您无法从该<head>部分运行此代码。
  3. 您有某种 HTML 错误导致id="teams"无法正确解释。
  4. HTML 正在页面中动态插入（通过其他一些 javascript），因此在您运行代码时它不存在。在这种情况下，您必须等到将其插入文档后才能查找它。
  5. HTML 在一个框架中，因此您在错误的文档中查找它。

最常见的错误是您过早地运行代码，您必须在运行代码之前等待 DOM 加载，或者您必须在<body>之前从标记末尾触发代码</body>。

于 2013-01-20T17:29:27.000 回答
1

你的代码很好。这是一个工作示例。确保在呈现 HTML 后运行 JS。要么把它放在身体的底部，要么把它跑进去window.onload。

这应该可以正常工作：

<table>
<tr><td>Team</td><td>Games</td><td>Players</td></tr>
<tr><td><div id="selTeam">
<select name="teams" id="teams" onChange="sndReq(this)"  >
  <option value="-1">-- Not Set --</option>
</select>
</div></td>
<td><div id="selGames">
<select name="games" id="games" onChange="sndReq(this)" )" >
  <option value="-1">-- Not Set --</option>
</select>
</div></td>
<td><div id="selPlayers">
<select name="players" id="players" onChange="sndReq(this)" )" >
  <option value="-1">-- Not Set --</option>
</select>
</div></td></tr>
</table>
<script type="text/javascript" language="javascript">
        var selbox = document.getElementById("teams");
        var idx = selbox.selectedIndex;
        var teamValue = selbox.options[idx].value;

        var selbox = document.getElementById("games");
        var idx = selbox.selectedIndex;
        var gameValue = selbox.options[idx].value;

        var selbox = document.getElementById("players");
        var idx = selbox.selectedIndex;
        var playerValue = selbox.options[idx].value;
</script>
于 2013-01-20T17:31:45.760 回答