Javascript document.getElementById(" ").src 不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11457693/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById(" ").src not working?
提问by FishBowlGuy
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?
我希望能够在下拉列表中选择 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>
回答by Mike Christensen
The getElementsByTagNamemethod will return a collection of tags by name, such as IMGor SELECT. Passing in the nameattribute of a tag will not yield any results.
的的getElementsByTagName方法将返回名字的标签的集合，如IMG或SELECT。传入name标签的属性不会产生任何结果。
You should probably use getElementByIdand pass in the idof the element:
您可能应该使用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>
You can also use getElementsByNamewhich will return a collection of DOM elements with the specified nameproperty, and then iterate through it to find the correct one.
您还可以使用getElementsByName，它将返回具有指定name属性的 DOM 元素集合，然后遍历它以找到正确的元素。
回答by Engineer
You need .getElementsByName()function instead of .getElementByTagName():
您需要.getElementsByName()函数而不是.getElementByTagName()：
document.getElementsByName('batteryID')[0].src = 'battery9.png';
As .getElementsByName()function returns list,and not a single element, for accessing list's element you need to use []square brackets.Specifically you need first matched element with name="batteryID", that's why you should use[0].
由于.getElementsByName()函数返回列表，而不是单个元素，为了访问列表的元素，您需要使用[]方括号。具体来说，您需要首先与 匹配的元素name="batteryID"，这就是您应该使用[0].
回答by Utkanos
Firstly, it is not cross-browser compatible to get the value of the selected optionby simply reading the value of the select. Instead, first detect the selected optionthen read ITS value.
首先，option通过简单地读取select. 相反，首先检测选定的option然后读取 ITS 值。
var sel = document.getElementById('batterylifes');
if (sel.options[sel.options.selectedIndex].value == 'batterylife9') {
//your code here...
}
Secondly, as many have pointed out, you are mistakenly using getElementsByTagNameto reference a single element by its name. You need getElementsByName(), though this is not cross-browser compatible either. Other options:
其次，正如许多人指出的那样，您错误地使用名称getElementsByTagName来引用单个元素。您需要getElementsByName()，尽管这也不是跨浏览器兼容的。其他选项：
- use jQuery or some other library
- if you don't care about old browsers, use the new
document.querySelector()method to select the element via CSS syntax - give the image an ID and use
getElementById()
- 使用 jQuery 或其他一些库
- 如果您不关心旧浏览器，请使用新
document.querySelector()方法通过 CSS 语法选择元素 - 给图像一个 ID 并使用
getElementById()
