Javascript calc help

[Aragorn]

I have a calculator like this. It calculates the total values of items. But can someone help me to make several values to one item.

For example, if you choose weapon1 and shield 2, it calculates weapon value1 and shield value1 together and waepon value2 and shield value2 together etc. All the items should have 12 values.

weapon1:
value1: 4
value2: 7
etc.

shield2:
value1: 68
value2: -2
etc.





<form name="weapon">

<script language="JavaScript">
function equipment(){

var weapon_var = document.weapon.weapon_select.value;
var shield_var = document.weapon.shield_select.value;

document.getElementById("weapon_custom").innerHTML = weapon_var;
document.getElementById("shield_custom").innerHTML = shield_var;

document.weapon.total_bonus.value = parseInt(weapon_var) + parseInt(shield_var);
}

</script>

<table border="1">

<tr><td>
<select name = 'weapon_select' onChange='equipment();'>
<optgroup label='Weapon'>
<option value = '0'> No Bonus </option>
<option value = '85'> weapon1 </option>
<option value = '40'> weapon2 </option>
<option value = '71'> weapon3 </option>
<option value = '66'> weapon4 </option>
<option value = '82'> weapon2 </option>
</optgroup>
</select>
<td><div id='weapon_custom'>0</div></td>
</td></tr>

<tr><td>
<select name = 'shield_select' onChange='equipment();'>
<optgroup label='shield'>
<option value = '0'> No Bonus </option>
<option value = '6'> Shield1 </option>
<option value = '8'> Shield2 </option>
</optgroup>
</select></td>
<td><div id='shield_custom'>0</div></td>
</td></tr>

<tr><td colspan="2">
<p>Total bonus: <input style='display: inline;' name='total_bonus' size='3' value=''>
</td></tr>
</table>
</form>

[jscheuer1]

Seems to work for me.

[mburt]

Works here fine too. But, please check out the DOM method instead of innerHTML:
http://www.slayeroffice.com/articles/innerHTML_alternatives/

[Aragorn]

I mean that i want something like this, but this code doesn't work in IE. With Firefox it works fine.


<script language="JavaScript">
function Tavarat(select) {

}
Tavarat.stash = new Array();
Tavarat.prototype = {
vaihda: function(select){
Tavarat.stash[select.name] = eval('(' + select.value + ')');
this.laske();
this.taulukko();
},
laske: function(){
this.total=0;
for(var i in Tavarat.stash){
for(var x in Tavarat.stash[i] ){
this.total+=parseInt(Tavarat.stash[i][x]);
}
}
},
haeMuuttujat: function(){
this.muuttujat = new Array();
for(var i in Tavarat.stash){
for(var x in Tavarat.stash[i] ){
this.muuttujat[x]=1;
}
}
},
taulukko: function(){
var table="";
this.haeMuuttujat();
var summat = new Array();
for(var i in Tavarat.stash){
table+="<tr><td>"+i+"</td>";
for(var x in this.muuttujat ){
if( Tavarat.stash[i][x] ) {
table+='<td>'+ Tavarat.stash[i][x] + '</td>';
if(summat[x] ){
summat[x] += Tavarat.stash[i][x];
}else{
summat[x] = Tavarat.stash[i][x];
}
}else{
table+='<td>0</td>';
}
}
table+="</tr>";
}
table+='<tr><td>summat:</td>';
/* for(var x in summat){
table+='<td>'+summat[x]+'</td>';
}*/
var head='<td>Nimi</td>';
for(var x in this.muuttujat ){
table += '<td>' + ( summat[x] ? summat[x] : 0 ) + '</td>';
head += '<td>' + x + '</td>';
}
table+='</table>'+'Total: '+this.total;

document.getElementById('taulukko').innerHTML='<table border="1"><tr>'+head+'</tr>'+ table;
},
};
var kraasa = new Tavarat();
</script>
<form name="weapon">
<table border="1">
<tr><td>
<select name = 'weapon' onChange='kraasa.vaihda(this);'>
<optgroup label='Weapon'>
<option value = '{}'> No Bonus </option>
<option value = '{hit:20,pv:10,bonus:2}'> weapon1 </option>
<option value = '{hit:25,pv:12,bonus:1}'> weapon2 </option>
</optgroup>
</select>
</td></tr>
<tr><td>
<select name = 'shield' onChange='kraasa.vaihda(this);'>
<optgroup label='shield'>
<option value = '{}'> No Bonus </option>
<option value = '{hit:13,pv:10,bonus:-6}'> Shield1 </option>
<option value = '{hit:26,pv:11,bonus:0}'> Shield2 </option>
</optgroup>
</select></td>
</tr>
</table>
</form>
Total bonus: <div id="taulukko"></div>

[jscheuer1]

It is a very simple syntax error that is causing your problem, one that FF will ignore but, not IE or Opera. Here:


. . . var head='<td>Nimi</td>';
for(var x in this.muuttujat ){
table += '<td>' + ( summat[x] ? summat[x] : 0 ) + '</td>';
head += '<td>' + x + '</td>';
}
table+='</table>'+'Total: '+this.total;

document.getElementById('taulukko').innerHTML='<table border="1"><tr>'+head+'</tr>'+ table;
},
};
var kraasa = new Tavarat();
</script>
<form name="weapon"> . . .

In most browsers, it is not permitted to continue the object with a comma if no more properties are to follow. Remove the red comma, things will get better.

[Aragorn]

Wow, it works now with IE. I have noticed before, that FF ignores many errors, but with IE, your coding must be perfect. I dont like IE :p