我遇到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>
之所以发生此问题,是因为您试图从节点元素中使用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
表单对象的类型为HTMLFormElement
。如前所述,您可以在getElementById
上调用document
,但不能在element
上调用,包括不能在HTMLFormElement
上调用。
但是表单包含元素,并且给定一个HTML表单元素对象可能要访问该表单元素中的特定元素,因此该怎么做呢?
嗯,您的HTMLFormElement
提供了一个名为elements
的属性。访问elements
上的elements
会产生一个HTMLFormElement
,其中包含在表单中找到的元素。 HTMLFormControlsCollection
源自类型HTMLFormControlsCollection
。 HTMLFormControlsCollection
有一个只读属性,还有两个方法。
属性为HTMLCollection
,它返回在集合中找到的元素数(在这种情况下,它将是表单元素中的元素)。
这两种方法是:
HTMLCollection
-返回指定的从零开始的索引处的特定节点。如果HTMLFormControlsCollection
超出范围,则返回length
。item(index)
-返回其ID或名称与ID所指定的字符串匹配的特定节点。仅在HTML中,并且仅当引用的元素支持null
属性时,才进行名称匹配。如果给定的ID /名称不存在任何节点,则返回null。因此,如果解决方案的表单对象的类型为index
,则要访问该对象的namedItem(id)
属性,请使用要从name
中撤消的元素的HTMLFormElement
对其调用elements
。
您正在尝试使用属于namedItem( id )
而不是id
(HTMLFormElement
)的功能。
DOMDocument
您的代码的有效版本实际上是:
DOMElement
注: ID属性应为unique,这意味着如果两个或多个元素在您的文档中具有相同的ID,则该页面被视为MDN。
我会尝试为此使用jQuery。您可以从一个选择中获取所需的元素,然后将其附加到另一个。
document.getElemendById()