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>

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>

• javascript

• batteryID is not a valid argument to document.getElementsByTagName(). I would give your image tag an ID and use document.getElementById() on it instead. Also, unrelated: </br> isn't valid markup. Use <br> or <br />. – Cᴏʀʏ Commented Jul 12, 2012 at 17:56
• i dont know why but using <br /> gives me this error "this element is not allowed to be self closing in the schema. remove the closing slash" – FishBowlGuy Commented Jul 12, 2012 at 18:02
• Then just use <br>. The self-closing example is for XHTML documents. – Cᴏʀʏ Commented Jul 12, 2012 at 18:06

3 Answers 3

The getElementsByTagName method will return a collection of tags by name, such as IMG or SELECT. Passing in the name attribute of a tag will not yield any results.

You should probably use getElementById and pass in the id of the element:

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 getElementsByName which will return a collection of DOM elements with the specified name property, and then iterate through it to find the correct one.

You need .getElementsByName() function instead of .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].

Firstly, it is not cross-browser patible to get the value of the selected option by simply reading the value of the select. Instead, first detect the selected option then read ITS value.

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 getElementsByTagName to reference a single element by its name. You need getElementsByName(), though this is not cross-browser patible either. Other options:

• 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()