Javascript错误:对象# 没有方法'getElementById'

问题描述 投票:4回答:4

我遇到Javascript错误:对象#没有方法'getElementById'。我正在尝试一个按钮,用于将所选元素传输到HTML中的另一个选择框。到处都看过了,但是nobody解决方案似乎对我有用= \

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>
php javascript html
4个回答
3
投票

之所以发生此问题,是因为您试图从节点元素中使用getElementById,并且此方法属于document。考虑一下这是合乎逻辑的:ID应该是唯一的在页面内部,因此使用dom元素来按ID“过滤”元素没有任何意义。

因此,如果您更改为:

document.frmSubmit.getElementById("selectedDivisions");

至:

document.getElementById("selectedDivisions");

一切都应按预期工作。


作为一个旁注,节点元素支持getElementsByTagNamegetElementsByClassName-它们用于选择与指定标签/类的名称匹配的所有子节点。

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


1
投票

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

但是表单包含元素,并且给定一个HTML表单元素对象可能要访问该表单元素中的特定元素,因此该怎么做呢?

嗯,您的HTMLFormElement提供了一个名为elements的属性。访问elements上的elements会产生一个HTMLFormElement,其中包含在表单中找到的元素。 HTMLFormControlsCollection源自类型HTMLFormControlsCollectionHTMLFormControlsCollection有一个只读属性,还有两个方法。

属性为HTMLCollection,它返回在集合中找到的元素数(在这种情况下,它将是表单元素中的元素)。

这两种方法是:

  • HTMLCollection-返回指定的从零开始的索引处的特定节点。如果HTMLFormControlsCollection超出范围,则返回length
  • item(index)-返回其ID或名称与ID所指定的字符串匹配的特定节点。仅在HTML中,并且仅当引用的元素支持null属性时,才进行名称匹配。如果给定的ID /名称不存在任何节点,则返回null。

因此,如果解决方案的表单对象的类型为index,则要访问该对象的namedItem(id)属性,请使用要从name中撤消的元素的HTMLFormElement对其调用elements


0
投票

您正在尝试使用属于namedItem( id )而不是idHTMLFormElement)的功能。

DOMDocument

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

DOMElement

注: ID属性应为unique,这意味着如果两个或多个元素在您的文档中具有相同的ID,则该页面被视为MDN


0
投票

我会尝试为此使用jQuery。您可以从一个选择中获取所需的元素,然后将其附加到另一个。

document.getElemendById()
© www.soinside.com 2019 - 2024. All rights reserved.