I'm working on a school project and came up with a football calculator app that uses html, css, js, and jquery. Essentially, the user inputs what yard-line your football team is on and it outputs how far away from the endzone you are. However, I can't seem to get the code to output correctly.
Any advice or help would be greatly appreciated.
Please check out the fiddle.
Thank you!
HTML:
<div class="tabs">
<!-- tabs -->
<ul class="tabNavigation">
<li><a href="#lesson">Lesson</a></li>
<li><a href="#converter">Converter</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ul>
<!-- tab containers -->
<div id="lesson">
<p>Being a quarterback in the NFL is a tough job. Mainly because each player has a different background and plays the game a little differently that his teammate next to him. Because of this, quarterbacks have to adjust. So, knowing your distance (in yards) from the endzone is important to know in clutch situations. This app was created for NFL coaches to relay the distance to the endzone in terms that all players can understand. Simply enter the number of yards to the endzone and select which outputs you would like. Now each player, no matter what country they're from, can understand the situation.</p>
</div>
<div id="converter">
<form>
<label>Enter what yard line the ball is on:</label>
<input for="yards" type="text" name="yards" id="yardLine"><br><br>
<label>Are you in your opponents territory (over the 50 yard line)?<br>
<input type="radio" name="territory" id="opponentsTerritory"> Yes<br>
<input type="radio" name="territory" id="ownTerritory"> No<br>
<input type="radio" name="territory" id="midfield"> 50 yard line<br>
</label><br><br>
<label> Select which distances you would like to know: <br>
<input type="checkbox" name="distance" id="yardsAmount">Yards <br>
<input type="checkbox" name="distance" id="milesAmount">Miles <br>
<input type="checkbox" name="distance" id="kilometersAmount">Kilometers <br>
<input type="checkbox" name="distance" id="metersAmount">Meters <br>
<input type="checkbox" name="distance" id="furlongsAmount">Furlongs <br>
<input type="checkbox" name="distance" id="centimetersAmount">Centimeters <br>
</label> <br><br>
<input class="btn btn-default btn-lg" type="button" name="calc" id="runCalc" value="Calculate">
</form>
<span id="outputYards"></span>
<span id="outputMiles"></span>
<span id="outputKilometers"></span>
<span id="outputMeters"></span>
<span id="outputFurlongs"></span>
<span id="outputCentimeters"></span>
</div>
<div id="conclusion">
<p>dgsdfhfdghs</p>
</div>
</div>
jQuery:
$('#runCalc').click(calculateDistances);
function calculateDistances() {
if ($('#opponentsTerritory').checked) {
$('#yardLine') === $('#yardsAmount');
};
if ($('#ownTerritory').checked) {
(100 - $('#yardLine')) === $('#yardsAmount');
};
if ($('#midfield').checked) {
$('#yardAmount') === 50;
};
var yardsAmount = $('#yardsAmount');
var milesAmount = parseInt($('#yardsAmount').val()) * 0.00056818;
var kilometersAmount = parseInt($('#yardsAmount').val()) / 1093.6;
var metersAmount = parseInt($('#yardsAmount').val()) / 1.0936;
var furlongsAmount = parseInt($('#yardsAmount').val()) * 0.0045454;
var centimetersAmount = parseInt($('#yardsAmount').val()) / 0.010936;
if ($('#yardsAmount').checked) {
$('#outputYards').html() = yardsAmount + " yards";
};
if ($('#milesAmount').checked) {
$('#outputMiles').html() = milesAmount + " miles";
};
if ($('#kilometersAmount').checked) {
$('#outputKilometers').html() = kilometersAmount + " kilometers";
};
if ($('#metersAmount').checked) {
$('#outputMeters').html() = metersAmount + " meters";
};
if ($('#furlongsAmount').checked) {
$('#outputFurlongs').html() = furlongsAmount + " furlongs";
};
}
});