how to use JS to dynamically update innerHTML
<p>I have a drop down box, each option in it has 2 values. I want to dynamically update value in my HTML based on the selection. The value that has to be shown is derived from drop down box values. Here is my code, but nothing seems to be happening here. </p>

<pre><code>&lt;html&gt;

    &lt;head&gt;&lt;title&gt;&lt;/title&gt;

    &lt;script type="text/javascript"&gt;

var a = new Array();
a[1] = "kgs"; 
a[2] = "gms"; 
a[3] = "ltrs"; 
a[4] = "ml"; 
a[5] = "nos"; 

window.onload = function() {

function updateunit(){

var b = document.getElementById("itemname");

var b1 = b.options[b.selectedIndex].value;

var c = b1.split(',');

var d = c[1];

var e = a[d];

alert(document.write(a[1]));

document.getElementById('pane2').innerHTML = b1 ;

}



updateunit()

document.getElementById('itemname').onchange = updateunit ;

}    

&lt;/script&gt;&lt;/head&gt;


&lt;body&gt;

&lt;form action='production.php' method="POST"&gt; 

Item Name &lt;select name ="itemname" id = "itemname"&gt;
&lt;option value = '1,5' &gt; A &lt;/option&gt;
&lt;option value = '2,5' &gt; B &lt;/option&gt;
&lt;option value = '3,5' &gt; C &lt;/option&gt;
&lt;option value = '4,5' &gt; D &lt;/option&gt;
&lt;/select&gt; &lt;br&gt;



Amount &lt;input type="text" name="amount"&gt; &lt;span id = "pane2"&gt;&lt;/span&gt; &lt;br&gt;

&lt;/form&gt;        

&lt;/body&gt;

&lt;/html&gt;
</code></pre>
