document.getElementById(" ").src 不起作用？

Question

我希望能够在下拉列表中选择 Battery 9。
我希望电池 9 的图像显示在 img 标签中。
难道我做错了什么？

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>

Answer 1

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它将返回具有指定name属性的 DOM 元素集合，然后迭代它以找到正确的元素。