Javascript document.getElementById（"；）.src不工作？

我希望能够在dropdownlist中选择电池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>

头部
函数checkBatteryLife（）{
if（document.getElementById（'batterylifes'）。value=='batterylife9'）{
document.getElementsByTagName（'batteryID'）.src='battery9.png'；
}
身体


电池9

您需要函数而不是

。getElementByTagName（）

：

由于

.getElementsByName（）

函数返回list，而不是单个元素，要访问list的元素，您需要使用

[]

方括号。具体地说，您需要使用第一个匹配的元素

name=“batteryID”

，这就是为什么您应该使用

[0]

您需要函数而不是

。getElementByTagName（）

：

由于

.getElementsByName（）

函数返回list，而不是单个元素，要访问list的元素，您需要使用

[]

方括号。具体地说，您需要使用第一个匹配的元素

name=“batteryID”

，这就是为什么您应该使用

[0]

该方法将按名称返回标记集合，例如

IMG

或

SELECT

。传入标记的

name

属性将不会产生任何结果

您可能应该使用并传入元素的

id

：

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

电池9

您还可以使用它返回具有指定的

name

属性的DOM元素集合，然后对其进行迭代以找到正确的元素。

该方法将按名称返回标记集合，例如

IMG

或

SELECT

。传递标记的

name

属性不会产生任何结果结果

您可能应该使用并传入元素的

id

：

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

电池9

---

您还可以使用它返回具有指定的

名称
属性的DOM元素集合，然后对其进行迭代以找到正确的元素。
首先，通过简单读取
选择
的值来获取所选
选项的值是不兼容跨浏览器的。相反，首先要检测选择的
选项
然后读取其值

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

其次，正如许多人指出的，您错误地使用
getElementsByTagName
引用单个元素的名称。您需要
getElementsByName（）
，但这也不兼容跨浏览器。其他选项：


使用jQuery或其他库
如果您不关心旧浏览器，请使用新的
document.querySelector（）
方法通过CSS语法选择元素
为图像指定一个ID并使用
getElementById（）
首先，通过简单读取
选择
的值来获取所选
选项
的值是不兼容跨浏览器的。相反，首先检测所选
选项
，然后读取其值

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

其次，正如许多人指出的，您错误地使用
getElementsByTagName
引用单个元素的名称。您需要
getElementsByName（）
，但这也不兼容跨浏览器。其他选项：


使用jQuery或其他库
如果您不关心旧浏览器，请使用新的
document.querySelector（）
方法通过CSS语法选择元素
为图像指定一个ID并使用
getElementById（）
batteryID
不是
document.getElementsByTagName（）
的有效参数。我会给你的图像标签一个ID并使用
document.getElementById（）
。另外，不相关的：

是无效的标记。请使用

或

。我不知道为什么，但使用
会出现以下错误：“此元素在架构中不允许自动关闭。请删除关闭斜杠”然后只需使用

。自动关闭示例适用于XHTML文档。
batteryID
不是
document.getElementsByTagName（）
的有效参数。我会给图像标记一个ID，然后使用
document.getElementById（）
。另外，不相关的：

是无效的标记。使用

或

。我不知道为什么，但使用
会出现以下错误：“此元素在架构中不允许自动关闭。请删除结束斜杠”，然后只使用

。自动关闭示例适用于XHTML文档。