Client-Side JS

Hi, I am very new to JS I was wondering if somebody could explain these basic things to me:

OK Here is the script:

function abc(aa){
option = aa.options[aa.selectedIndex];

changeimg = '<img src="' + option.value + '" />';

document.getElementById('abc').innerHTML = changeimg
}


Could somebody please just comment these 4 lines out for me and tell me what exactly they do, remember I haven't used JS before. for example what is aa used for in function abc(aa) is this even needed?

I would be greatful please it is only 4 lines of code, many thanks to anybody who can help!!

 

• The abc() function is called from the onchange event of a <select> element.
• The <option> elements within this <select> element would each contain an absolute or relative path to an image as their value.
• The aa variable corresponds to the <select> object, passed as a parameter.
• There must be a <div> (or other element whose content can be dynamically changed) which has an ID of abc. I would recommend renaming because it is ambiguous with the function name, although it will probably work anyway (it did for me in IE7).

The following example would make use of this function:

<script type="text/javascript">

function abc(aa)
{
    option = aa.options[aa.selectedIndex];
    changeimg = '<img src="' + option.value + '"  />';
    document.getElementById('abc').innerHTML = changeimg;
}

</script>

<select onchange="abc(this)">
    <option value="/images/worms.jpg">Worms</option>
    <option value="/images/frogs.jpg">Frogs</option>
    <option value="/images/pigs.jpg">Pigs</option>
</select><br /><br />

<div id="abc"></div>

Code (markup):