Posted By

dmkim on 08/23/14


Tagged


Versions (?)

might calculator


 / Published in: jQuery
 

might calculator

  1. <script>// <![CDATA[
  2. (function($) {
  3.  
  4. var races= [ {num:0, name:'Elves'},
  5. {num:1, name:'Dwarves'}];
  6.  
  7. var els = [{n:"Battering Rams",m: 24, r:0},
  8. {n:"Boar Archers",m: 72, r:1},
  9. {n:"Boar Riders",m: 16, r:1 },
  10. ...
  11. ];
  12.  
  13. $(document).ready (
  14. function() {
  15.  
  16. $('form[name="calc"]')
  17. .prepend($('<fieldset/>').append($('<legend/>').html('&nbsp;&nbsp;&nbsp;Select your race&nbsp;&nbsp;&nbsp;')))
  18.  
  19. for (var i=0; i<races.length; i++) {
  20. $('form[name="calc"] fieldset:first')
  21.  
  22. .append(
  23. $('<span/>').css('margin-right',40).html('&nbsp;&nbsp;'+races[i].name).prepend($('<input/>',{name:'selrace', type:'radio', value:races[i].num}))
  24. )
  25. }
  26.  
  27. //------------------------------
  28. $('input[name="selrace"]').click (
  29. function() {
  30. var race = this.value;
  31.  
  32. $('select[name="unit_type"]').empty();
  33. sel = document.forms.calc.unit_type;
  34.  
  35. for (var i=0; i<els.length; i++) {
  36. if (els[i].r!=race)
  37. continue;
  38. var opt = new Option (els[i].n, els[i].m, false, false);
  39.  
  40. try {
  41. sel.add(opt, null);
  42. } catch (e)
  43. {
  44. sel.add(opt);
  45. }
  46. }
  47. }).eq(0).click();
  48.  
  49. //--------------------------
  50. $('form').submit(
  51. function() {
  52. var might = parseInt(this.unit_type.value)*parseInt(this.packsize.value)*parseInt(this.numpacks.value);
  53.  
  54.  
  55. var restab = $('#resulttable');
  56.  
  57. if (restab.length==0) {
  58. $('form[name="calc"]').before($('<table/>',{id:'resulttable'}).css('background','#efe'));
  59.  
  60. restab = $('#resulttable').get(0);
  61. var header = restab.createTHead();
  62. var row = header.insertRow();
  63. a= ['Troop name','Pack','Pack might','Owned','Tot. might']
  64. for (var i=0; i<a.length; i++ ) {
  65. var cell = row.insertCell();
  66. cell.innerHTML = a[i];
  67. }
  68. }
  69.  
  70. restab = $('#resulttable').get(0);
  71. var tbody = restab.tBodies[restab.tBodies.length-1] || restab;
  72.  
  73. var row = tbody.insertRow();
  74. var cell = row.insertCell();
  75. cell.innerHTML = this.unit_type.options[this.unit_type.selectedIndex].text;
  76. cell = row.insertCell();
  77. cell.innerHTML = this.packsize.value;
  78. cell = row.insertCell();
  79. cell.innerHTML = parseInt(this.unit_type.value)*parseInt(this.packsize.value)
  80.  
  81. cell = row.insertCell();
  82. cell.innerHTML = this.numpacks.value;
  83. cell = row.insertCell();
  84. cell.innerHTML = might;
  85.  
  86. return false;
  87. })
  88.  
  89. })
  90.  
  91. })(jQuery)
  92. // ]]></script>
  93.  
  94. <form enctype="application/x-www-urlencoded" method="post" name="calc">
  95. <fieldset>
  96. <p>Input Unit type &nbsp;&nbsp;&nbsp;
  97. <select style="width:70%" name="unit_type">
  98. </select></p>
  99. <p>Pack size <input style="width:70px" name="packsize" type="number" size="4" value="0" />
  100. Number of packs <input style="width:70px" name="numpacks" type="number" size="4" value="0" />
  101. <input style="padding:10px" name="submit" type="submit" value="Calculate" /></p></fieldset>
  102.  
  103. </form>

Report this snippet  

You need to login to post a comment.