2

I want to be able to choose the Battery 9 inside the dropdownlist.
I want the image of Battery 9 to show in the img tag.
Am I doing something wrong?

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

3 回答 3

5

getElementsByTagName方法将按名称返回标签集合，例如IMGor 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 元素集合，然后遍历它以找到正确的元素。

于 2012-07-12T17:57:07.760 回答
3

您需要.getElementsByName()函数而不是.getElementByTagName()：

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

由于.getElementsByName()函数返回列表，而不是单个元素，因此要访问列表的元素，您需要使用[]方括号。特别是您需要第一个匹配的元素name="batteryID"，这就是您应该使用[0].

于 2012-07-12T17:56:06.513 回答
1

首先，option通过简单地读取select. 相反，首先检测选定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-12T18:03:29.887 回答