PDA

View Full Version : Javascript calc help



Aragorn
01-28-2007, 05:11 AM
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
01-28-2007, 05:33 AM
Seems to work for me.

mburt
01-28-2007, 12:39 PM
Works here fine too. But, please check out the DOM method instead of innerHTML:
http://www.slayeroffice.com/articles/innerHTML_alternatives/

Aragorn
01-28-2007, 02:14 PM
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
01-28-2007, 08:49 PM
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
01-28-2007, 09:38 PM
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