Javascript錯誤：對象＃<HTMLFormElement>沒有方法'getElementById'

我得到一個Javascript錯誤：對象＃沒有方法'getElementById'。我試圖讓一個按鈕將選定元素傳輸到HTML中的另一個選擇框。已經到處找，但小人物解決方案似乎爲我工作= \Javascript錯誤：對象＃<HTMLFormElement>沒有方法'getElementById'

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

來源

2013-07-31 Brandon McAlees

IDS是單數，你不能有多個具有相同ID的元素。 – epascarello

這個問題發生，因爲你正在嘗試使用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-31 13:56:35

感謝您的快速回復！現在我收到一個錯誤：無法讀取屬性'值'是未定義的。我知道我爲每個條目賦予了一個值，這是使我失敗的錯誤，但首先讓我提交。 –

正如我所說的，你不能在元素中使用'getElementById'（它不會工作），所以你應該使用'document.getElementById'而不是'document。 .getElementById'（也包括'var div'）。 –

您正在嘗試使用屬於一個DOMDocument，而不是一個DOMElement（MDN）的功能。

document.getElemendById()

代碼的有效版本是actualy：

document.getElementById("selectedDivisions");

注： ID屬性應該是獨特，這意味着如果兩個或多個元素具有相同的ID在你的文件中，該頁面被認爲是invalid by W3c。

來源

2013-07-31 14:02:53

我會嘗試爲此使用jQuery。你可以從一個選擇中抓取你想要的元素，並將它附加到另一個。

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

來源

2013-07-31 14:06:33

Javascript錯誤：對象＃<HTMLFormElement>沒有方法'getElementById'

回答

相關問題