ternary operator doesnt work with state.variables sugarcube

i have two somekind of health bar in header and some code in passage to calculate the health bar and animate it, but some error popup and said bad evaluation:energyTotal is not defined

::PassageHeader
<div class="section-stats btcf">
	<div class="stats-wrapper energy-bar" data-status="energy-bar">
		<span>Energy</span>
		<div class="stats-bar">
	  		<div class="bar">
		  		<div class="hit"></div>
	  		</div>
		</div>
	</div>
	<div class="stats-wrapper hunger-bar" data-status="hunger-bar">
		<span>Hunger</span>
		<div class="stats-bar">
	  		<div class="bar">
		  		<div class="hit"></div>
	  		</div>
		</div>
	</div>
</div>

::Passage
<<script>>
$('.section-stats .stats-wrapper').each(function(index, el) {
	var dataStats = $(this).data('status');

	var eBar = $('.'+ dataStats +' .stats-bar'),
		bar = eBar.find('.bar');

	var varTotal = (dataStats = "energy-bar")?energyTotal:hungerTotal;
	var varName = (dataStats = "energy-bar")?energy:hunger;
	var varLoss = (dataStats = "energy-bar")?energyLoss:hungerLoss;

	var total = State.variables.varTotal,
		value = State.variables.varName,
		damage = State.variables.varLoss,
		barWidth = (value / total) * 100,
		delayReset = false;

	if (damage != 0) {
		value -= damage;
		barWidth = (value / total) * 100;
		State.variables.varName = value;
		State.variables.varLoss = 0;
		delayReset = true;
	}

	eBar.data('total', total);
	eBar.data('value', value);
	if (State.variables.varName <= State.variables.varTotal){
		if(State.variables.varName>0){
			bar.css('width', barWidth + "%");
		}else{
			bar.css('width', '0');
			State.variables.varName = 0
		}
	}else{
		bar.css('width', "100%");
		State.variables.varName = 100
	}
});
<</script>>

is using ternary operator is wrong ? or the whole concept is bad ? im using ternary operator because i want multiple health bar like.

any help will be appreciated, thx before.