JavaScript错误：对象#<HTMLFormElement>没有方法'getElementById'。

Question

我遇到了一个Javascript错误：Object #没有方法'getElementById'。我正在尝试在HTML中创建一个按钮，将所选元素传输到另一个选择框中。我已经找遍了所有地方，但似乎没有人的解决方案适用于我的情况 =\

<script language="javascript">
function addDivision()
{
    var selected = document.frmSubmit.getElementById("selectedDivisions");

    var div = document.frmSubmit.getElementById("divisions");
    var divId = div.options[div.selectedIndex].value;
    var divText = div.options[div.selectedIndex].text;

    var newOption = document.frmSubmit.createElement(divId);
    newOption.text = divText;

    selected.add(newOption,null);
}
</script>

HTML

<div id="content">
<form id="frmSubmit" name="frmSubmit" action="">


<div id="Step1Content">
    <h2 style="float:left">Step 1:</h2><p style="float:left; padding-top:10px; padding-left:20px;">Select your divisions</p>
    <div style="clear:both">
        <select id= "divisions" name="divisions" size="8">
    <?  //Getting divisions based on League_id
        $getDivisionsSQL = "Select * FROM level WHERE League_ID = '1' AND disabled = '0'";
        $getDivisionsQuery = $db->Query($getDivisionsSQL);
        while( $divRow = $db->GetRow($getDivisionsQuery) )
        {
            echo "<option id=".$divRow['id'].">".$divRow['description']."</option>";
        }
    ?>
        </select>
    <?  
        echo "<img id='doAdd' width='40px' height='25px' style='position: relative; bottom:75px; cursor:pointer;' src='".$baseImagesPath."greenArrow.png'/>";
        echo "<img id='doAdd' width='40px' height='25px' cursor:pointer; style='position: relative; bottom: 25px; right:40px; cursor:pointer;' src='".$baseImagesPath."redArrow.png'/>";
    ?>  
        <select style="position:relative; right:40px;" name="selectedDivisions" id="selectedDivisions" size="8">
    <?  //List of divisions to use

    ?>  <option>Apple</option>
        </select>
    </div>

</div>





<div style="padding-top:50px; padding-left:50px; width:100%; float:left; ">
    <h2 style="float:left">Step 2:</h2><p style="float:left; padding-top:10px; padding-left:20px;">Select the starting date of games</p>
</div>

<div style="padding-top:50px; padding-left:50px; width:100%; float:left">
    <h2 style="float:left">Step 3:</h2><p style="float:left; padding-top:10px; padding-left:20px;">Select the total number of weeks in the season</p>

<div style="padding-top:50px; width:100%; float:left">
    <input type="submit" value="Create Schedule">
</div>
</div>

</form>
</div>

- Brandon McAlees

---

IDS 是唯一的，您不能有多个元素具有相同的 id。 - epascarello

Answer 1

这个问题是因为你试图从一个节点元素使用 getElementById，而这个方法属于 document。当你思考它时，这是合乎逻辑的：在你的页面中，ID 应该是唯一的，所以使用 DOM 元素来“过滤” ID 没有意义。

如果你改成以下写法：

document.frmSubmit.getElementById("selectedDivisions");

to:

document.getElementById("selectedDivisions");

一切应该如预期般工作。

---

另外，getElementsByTagName和getElementsByClassName支持用于节点元素 - 它们用于选择与指定标签/类名匹配的所有子节点。

请查看API参考： https://developer.mozilla.org/en-US/docs/Web/API/element

- Marlon Bernardes

---

谢谢您的快速回复！现在我遇到了一个错误：无法读取未定义的属性“value”。我知道我正在为每个条目赋值，这就是让我首先放置frmSubmit的错误。 - Brandon McAlees

就像我之前所说的，你不能从一个元素中使用 getElementById（它不会起作用），所以你应该使用 document.getElementById 而不是 document.<element>.getElementById（这也包括 var div）。 - Marlon Bernardes

Answer 2

一个表单对象是HTMLFormElement类型的。如前所述，您可以在document上调用getElementById，但不能在element上调用，包括不能在HTMLFormElement上调用。

但是，表单包含元素，因此在给定HTML表单元素对象的情况下，有理由访问该表单元素中的特定元素，那么如何做到这一点呢？

好吧，您的HTMLFormElement提供了一个名为elements的属性。访问HTMLFormElement上的elements会产生一个包含在您的表单中找到的元素的HTMLFormControlsCollection。 HTMLFormControlsCollection派生自类型HTMLCollection。对于HTMLFormControlsCollection有一个只读属性和两个方法。

该属性是length，它返回集合中找到的元素数量（在这种情况下，将是表单元素中的元素）。

这两个方法是：

• item(index) - 返回指定基于零的索引处的特定节点。如果index超出范围，则返回null。
• namedItem(id) - 返回ID或名称与指定id字符串匹配的特定节点，作为后备方案。仅在HTML中进行名称匹配，仅在引用的元素支持name属性时才执行。如果不存在给定的id / name的节点，则返回null。

因此，如果有一个HTMLFormElement类型的表单对象，解决方案就是访问对象的elements属性，在其上使用namedItem(id)并使用要从HTMLFormElement检索的元素的id。

语法如下：

let element_obj = form_obj.elements.namedItem( id )

这里的form_obj是你的HTMLFormElement，id是你想要访问的表单元素的id。

- Peter Jirak Eldritch

Answer 3

我会尝试使用jQuery来完成这个。你可以从一个下拉框中获取所需的元素并将其附加到另一个下拉框中。

    $('#selectedDivisions').append($('#divisions'));

- Cavanaugh Sean

Answer 4

您正在尝试使用属于DOMDocument而不是DOMElement的函数（MDN）。

document.getElemendById()

您的代码的有效版本实际上是：

document.getElementById("selectedDivisions");

注意：ID属性应该是唯一的，这意味着如果你的文档中有两个或多个元素具有相同的ID，则页面被W3C认为是无效的。

- Jeff Noel