I have a few objectives (which are working fine, but I want tips in case I can improve it).
Let me try to make this as clear as possible, as this is a much larger project:
There are three move categories:
Hammer
(10 damage)Scythe
(5 damage)Meditate
(0 damage)
I will be having hundreds of additions, but these values above are static
indefinitely. I'm trying to update a total damage count, but the kicker is that the player can change this move type in the middle of adding other things.
Essentially, I need it to display an accurate estimated damage count based on other values that will end up occurring (this is entirely GUI based, I have the back-end data working).
HTML:
<input type="radio" value="hammer" class="hammer" data-damage="10" name="attackTypeP1" />
<label>Hammer (10)</label>
<input type="radio" value="scythe" class="scythe" data-damage="5" name="attackTypeP1" />
<label>Scythe (5)</label>
<input type="radio" value="meditate" class="meditate" data-damage="0" name="attackTypeP1" />
<label>Meditate (0)</label>
<hr />
<input type="button" id="addDmg" value="Add Damage" />
<input type="button" id="remDmg" value="Remove Damage" />
<div>Total</div>
<div id="total">0</div>
JS:
$(function() {
var dom = $('#total');
var total = 0;
var moveVal = 0;
$('#addDmg').on('click', function() {
total += 1;
dom.text(total + moveVal);
});
$('#remDmg').on('click', function() {
total -= 1;
dom.text(total + moveVal);
});
$(':radio').on('click', function() {
moveVal = $(this).data('damage');
dom.text(total + moveVal);
});
});
3 questions:
- I'm using
data-attr
via HTML to find the values. I understand it would be quicker to run this in an array or something, but if it has to traverse the DOM anyway to find out which one was selected, is there any real performance upgrade opposed to using data in HTML? - If these are the only radio buttons on the page, is the way I've built my
:radio
click function reasonable? Welcoming any tips you could provide if somebody else has advice to make this faster. - Is using a variable for
moveVal
pretty much the only way to tackle this without adding all the other additions and whatnot EVERY time?
Maybe this will make more sense if I show a full demo?