Question

我希望能够在下拉列表中选择电池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元素集合，然后遍历它以找到正确的属性。

Answer 2

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

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

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

Answer 3

首先，通过简单地读取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()

document.getElementById（“”）。src无效？

3 个答案: