Question

可能重复：
Why does jQuery or a DOM method such as `getElementById` not find the element?

我确信这是显而易见的，但是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。

谢谢！

Answer 1

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

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

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

Answer 2

你的代码很好。这是一个working example。确保在呈现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>

按ID获取选择元素的值

2 个答案: