document.getElementById（「」）.src不工作？

我希望能夠在下拉列表中選擇電池9。
我想讓電池9的圖像顯示在img標籤中。
我做錯了什麼？document.getElementById（「」）.src不工作？

HEAD 
function checkBatteryLife(){ 
if(document.getElementById('batterylifes').value == 'batterylife9'){ 
    document.getElementsByTagName('batteryID').src = 'battery9.png'; 
} 
BODY 
<img alt="" src="" name="batteryID" onclick="checkBatteryLife()"> 
</br> 
<select id="batterylifes" onchange="checkBatteryLife()"> 
<option name="batteryIMG" value="batterylife9">Battery 9</option> 
</select>

來源

2012-07-12 FishBowlGuy

'batteryID'不是'document.getElementsByTagName（）'的有效參數。我會給你的圖像標籤一個ID，並使用'document.getElementById（）'代替它。另外，無關：'
'不是有效的標記。使用'
'或'
'。 – 2012-07-12 17:56:41

我不知道爲什麼，但使用
給了我這個錯誤「這個元素不允許在模式中自行關閉。刪除結束斜槓」 – FishBowlGuy 2012-07-12 18:02:29

然後只需使用'
'。這個自閉例子是針對XHTML文檔的。 – 2012-07-12 18:06:34

getElementsByTagName方法將按名稱返回一組標籤，如IMG或SELECT。傳遞標記的name屬性不會產生任何結果。

你應該使用getElementById並傳入元素的id：

function checkBatteryLife() { 
    if(document.getElementById('batterylifes').value == 'batterylife9') 
    { 
     document.getElementsById('batteryID').src = 'battery9.png'; 
    } 
}

<img alt="" src="" id="batteryID" onclick="checkBatteryLife()" /> 
<br /> 
<select id="batterylifes" onchange="checkBatteryLife()"> 
    <option name="batteryIMG" value="batterylife9">Battery 9</option> 
</select>

您還可以使用getElementsByName將返回DOM元素的集合與指定name屬性，然後遍歷它以找到正確的屬性。

來源

2012-07-12 17:57:07

你需要.getElementsByName()功能，而不是.getElementByTagName()：

document.getElementsByName('batteryID')[0].src = 'battery9.png';

由於.getElementsByName()函數返回列表，而不是一個單一的元素，用於訪問列表的元素，你需要使用[]方brackets.Specifically你需要先與name="batteryID"匹配的元素，這就是爲什麼你應該使用[0]。

來源

2012-07-12 17:56:06 Engineer

首先，通過簡單讀取select的值，獲得所選option的值並不是跨瀏覽器兼容的。相反，首先檢測所選的option，然後讀取ITS值。

var sel = document.getElementById('batterylifes'); 
if (sel.options[sel.options.selectedIndex].value == 'batterylife9') { 
    //your code here... 
}

其次，正如許多人所指出的那樣，你被錯誤使用getElementsByTagName通過其名稱引用一個元素。你需要getElementsByName()，雖然這不是跨瀏覽器兼容。其他選項：

使用jQuery或其他一些圖書館
，如果你不關心舊的瀏覽器，使用新的方法document.querySelector()通過CSS語法
選擇元素賦予圖像的ID及使用getElementById()

來源

2012-07-12 18:03:29 Utkanos

絕對值得一試。 – 2012-07-12 18:09:30

Ta非常:) ... – Utkanos 2012-07-12 18:11:41

document.getElementById（「」）.src不工作？

回答

相關問題