4

我收到 Javascript 错误：对象 # 没有方法“getElementById”。我正在尝试使用一个按钮将选定元素传输到 HTML 中的另一个选择框。到处都看过，但没有人的解决方案似乎对我有用=\

Javascript

<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>
4

4 回答 4

5

发生此问题是因为您尝试getElementById从节点元素使用，并且此方法属于document. 仔细想想，这是合乎逻辑的：ID 在您的页面中应该是唯一的，因此使用 dom 元素来通过 id“过滤”元素是没有意义的。

所以，如果你改变：

document.frmSubmit.getElementById("selectedDivisions");

到：

document.getElementById("selectedDivisions");

一切都应该按预期工作。

作为旁注，getElementsByTagName并且getElementsByClassName支持节点元素 - 它们用于选择与指定标签/类的名称匹配的所有子节点。

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

于 2013-07-31T13:56:35.620 回答
1

表单对象的类型为HTMLFormElement。如前所述，您可以调用getElementByIdadocument但不能调用 an element，包括 not HTMLFormElement。

但是一个表单包含元素，并且给定一个 HTML 表单元素对象，人们想要访问该表单元素中的特定元素是合理的，那么如何做到这一点呢？

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

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

这两种方法是：

  • item(index)- 返回指定从零开始的索引处的特定节点。null如果index超出范围则返回。
  • namedItem(id)- 返回其 ID 或作为后备名称与 id 指定的字符串匹配的特定节点。按名称匹配仅作为最后的手段进行，仅在 HTML 中，并且仅当引用的元素支持该name属性时。如果给定的 id/name 不存在节点，则返回 null。

因此，如果有一个表单对象类型的解决方案HTMLFormElement是访问该对象的elements属性，请namedItem( id )使用id要从HTMLFormElement.

语法是：

let element_obj = form_obj.elements.namedItem( id )

form_obj您在哪里，HTMLFormElement并且id是您要访问的表单中元素的 id。

于 2020-01-27T18:56:28.803 回答
0

您正在尝试使用属于 aDOMDocument而非 a DOMElement( MDN ) 的函数。

document.getElemendById()

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

document.getElementById("selectedDivisions");

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

于 2013-07-31T14:02:53.130 回答
0

我会尝试为此使用jQuery。您可以从一个选择中获取您想要的元素并将其附加到另一个。

    $('#selectedDivisions').append($('#divisions'));
于 2013-07-31T14:06:33.167 回答