help with code

i made this simple calculator to calculate damage for a game

my problem is that whenever some one selects something from document.calc.selectbow i want the equivalent image to appear

any ideas
cant get it to work

<script language="javascript">
//GLOBAL VARIABLES
//define the arrays used in the program

var short_bow_min = new Array(3,6,9,12,15,18,21,24,27,30);
var short_bow_max = new Array(5,8,11,14,17,20,23,26,29,32);

var bow_min = new Array(9,12,15,18,21,24,27,30,33,36);
var bow_max = new Array(15,18,21,24,27,30,33,36,39,42);

var fairy_bow_min = new Array(17,20,23,26,29,32,35,38,41,44);
var fairy_bow_max = new Array(24,27,30,33,36,39,42,45,48,51);

var battle_bow_min = new Array(28,31,34,37,40,43,46,49,52,55);
var battle_bow_max = new Array(37,40,43,46,49,52,55,58,61,64);

var tiger_bow_min = new Array(42,45,48,51,54,57,60,63,66,69);
var tiger_bow_max = new Array(52,55,58,61,64,67,70,73,76,79);

var chaos_bow_min = new Array(77,80,83,86,89,92,95,98,101,104);
var chaos_bow_max = new Array(102,105,108,111,114,117,120,123,126,129);



//check if empty
function check(){
if((document.calc.agi=='')||(checknumber()!=true))
return false;
else
calculate();
}

//check if number entered
function checknumber(){
var x=document.calc.agi.value;
var anum=/(^d+$)|(^d+.d+$)/

if (anum.test(x))
testresult=true
else{
alert("Only Numbers can be entered here")
testresult=false
}
return (testresult)
}

//round the values here
function roundToEven(num){
if ((Math.floor(num)%2==0) && (Math.abs(num-Math.floor(num))==0.5))
return Math.round(num)-1;
else
return Math.round(num);
}

function calculate(){
display_min = document.calc.mini.value;
displaymax = document.calc.maxi.value;
temp = document.calc.selectdamage.value;
agility = document.calc.agi.value;
//short bow
if(document.calc.selectbow.value==0){
document.calc.mini.value = roundToEven((agility/8)) + short_bow_min[temp];
document.calc.maxi.value = roundToEven((agility/4)) + short_bow_max[temp];
}

//bow
if(document.calc.selectbow.value==1){
//alert(bow_min[temp]+" "+bow_max[temp]+" "temp)
document.calc.mini.value = roundToEven((agility/8)) + bow_min[temp];
document.calc.maxi.value = roundToEven((agility/4)) + bow_max[temp];
}
//fairy bow
if(document.calc.selectbow.value==2){
document.calc.mini.value = roundToEven((agility/8)) + fairy_bow_min[temp];
document.calc.maxi.value = roundToEven((agility/4)) + fairy_bow_max[temp];
}
//battle bow
if(document.calc.selectbow.value==3){
document.calc.mini.value = roundToEven((agility/8)) + battle_bow_min[temp];
document.calc.maxi.value = roundToEven((agility/4)) + battle_bow_max[temp];
}
//tiger bow
if(document.calc.selectbow.value==4){
document.calc.mini.value = roundToEven((agility/8)) + tiger_bow_min[temp];
document.calc.maxi.value = roundToEven((agility/4)) + tiger_bow_max[temp];
}
//chaos bow
if(document.calc.selectbow.value==5){
document.calc.mini.value = roundToEven((agility/8)) + chaos_bow_min[temp];
document.calc.maxi.value = roundToEven((agility/4)) + chaos_bow_max[temp];
}
}

</script>
<form action="" method="" name="calc">
<table width="48%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2"><font size="2" face="Arial, Helvetica, sans-serif">
<label>Agility</label>
<input name="agi" type="text" id="agi2">
</font></td>
</tr>
<tr>
<td width="48%"><font size="2" face="Arial, Helvetica, sans-serif">
<label>Select Bow</label>
<select name="selectbow" onChange="swapimage();">
<option selected>Select bow</option>
<option value="0">Short Bow</option>
<option value="1">Bow</option>
<option value="2">Fairy Bow</option>
<option value="3">Battle Bow</option>
<option value="4">Tiger Bow</option>
<option value="5">Chaos Bow</option>
</select>
</font></td>
<td width="52%"><font size="2" face="Arial, Helvetica, sans-serif">
<label>+ on bow</label>
<select name="selectdamage">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</font></td>
</tr>
<tr>
<td align="center">
//here is the place for the image to appear
<script language="javascript">
// function swapimage(){
<script type="text/javascript" language="javascript1.2">
function swapimage(){
alert(document.calc.selectbow.value)
if(document.calc.selectbow.value==0)
document.write("<img src="calculators/elf/k90.gif">");
if(document.calc.selectbow.value==1)
document.write("<img src="calculators/elf/k90.gif">");
if(document.calc.selectbow.value==2)
document.write("<img src="calculators/elf/k90.gif">");
if(document.calc.selectbow.value==3)
document.write("<img src="calculators/elf/k91.gif">");
if(document.calc.selectbow.value==4)
document.write("<img src="calculators/elf/k92.gif">");
if(document.calc.selectbow.value==5)
document.write("<img src="calculators/elf/k94.gif">");
}</script>
</script></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><font size="2" face="Arial, Helvetica, sans-serif">
<label>Min Damage</label>
</font></td>
<td><font size="2" face="Arial, Helvetica, sans-serif">
<input name="mini" type="text" id="agi3" readonly="">
</font></td>
</tr>
<tr>
<td><font size="2" face="Arial, Helvetica, sans-serif">
<label>Max Damage</label>
</font></td>
<td><font size="2" face="Arial, Helvetica, sans-serif">
<input name="maxi" type="text" id="agi4" readonly="">
</font></td>
</tr>
<tr align="center">
<td colspan="2"><font size="2" face="Arial, Helvetica, sans-serif">
<input name="Calculate" type="button" value="Calculate" onClick="return check();">
<input name="Submit2" type="reset" value="Reset">
</font></td>
</tr>
<tr>
<td colspan="2"><font size="2" face="Arial, Helvetica, sans-serif"><b>If no result appears after several times of using the calculator pls press the reset button</b></font></td>
</tr>
</table>
</form>

ok guys now it works:/

only problem it opens the image in a new window insted of writing it in the cell
any ideas?

The reason that the image seems to appear in a new page is because document.write over-writes the html of the current page if it is called after the page has loaded. So the HTML of the page becomes <img src="calculators/elf/k90.gif"> or something.

You should put a transparent 1x1 image in the page where you want your image to appear and change its src via javascript on the onchange event of the select.

I.e.

<img id="my_image" src="calculators/elf/trans_pix.gif"> // the 1x1 transparent image

function swapimage(){
if(document.calc.selectbow.value==0)
document.all.my_image.src="calculators/elf/k90.gif";
if(document.calc.selectbow.value==1)
document.all.my_image.src="calculators/elf/k90.gif";
if(document.calc.selectbow.value==2)
document.all.my_image.src="calculators/elf/k90.gif";
if(document.calc.selectbow.value==3)
document.all.my_image.src="calculators/elf/k91.gif";
if(document.calc.selectbow.value==4)
document.all.my_image.src="calculators/elf/k92.gif";
if(document.calc.selectbow.value==5)
document.all.my_image.src="calculators/elf/k94.gif";
}</script>

Jimbob D