Problem with JScript Updating a Div

[ciber]

Hi, I found this code on the web, and have tried to modify it to include some other features - but it just doesn't want to work.

Basically the original code alerts the user that only 5 selections are allows to be made, the part I tried to integrate basically takes the inputs name, and inserts the string below into a div tag:

"<img src='traits/"+document.getElementById('trait'+count).value+".png'>";

It then proceeds to making the div visible, but my problem is its not reading the name attribute in the input tag, nor is it showing the image - and when it does show the image link, its showing only 1 or its not hiding it.

 

Basically the script needs to take the selected option, and insert its name field into the img src as mentioned above, but when an option is unselected it must hide that option and shift the images up again, so that the previously selected are shown.

 

Any help will be greatly appreciated!!

 

<script type="text/javascript">
var selectedOptions = []; // Written by: WillyDuitt@hotmail.com \\;
var count = 0;
function countSelected(select,maxNumber){

   for(var k=1; k<6; k++){
        document.getElementById('trait'+k).style.visibility = 'hidden'; 
     }

   for(var i=0; i<select.options.length; i++){
     if(select.options[i].selected && !new RegExp(i,'g').test(selectedOptions.toString())){
        selectedOptions.push(i);
        document.getElementById('trait'+count).innerHTML = "<img src='traits/"+document.getElementById('trait'+count).value+".png'>"; // should be the inputs name not value
           for(var s=1; s<=count; s++){
              count++;
              document.getElementById('trait'+s).style.visibility = 'visible';
           }
     }

     if(!select.options[i].selected && new RegExp(i,'g').test(selectedOptions.toString())){
      selectedOptions = selectedOptions.sort(function(a,b){return a-b});  
       for(var j=0; j<selectedOptions.length; j++){
         if(selectedOptions[j] == i){
            selectedOptions.splice(j,1);
         }
       }
           document.getElementById('trait'count).innerHTML = "";
              e--;
              document.getElementById('trait'+e).style.visibility = 'hidden';
           }
     }

     if(selectedOptions.length > maxNumber){
        alert('You may only choose '+maxNumber+' options!!');
        select.options[i].selected = false;
        selectedOptions.pop();
        document.body.focus();
     }  
   }    
}
</script>

 

<div id="trait1"></div>
<div id="trait2"></div>
<div id="trait3"></div>
<div id="trait4"></div>
<div id="trait5"></div>

[ciber]

Found a simple workaround nevermind