1

我正在做一个学校项目，并想出了一个使用 html、css、js 和 jquery 的足球计算器应用程序。本质上，用户输入你的足球队在什么码线上，它输出你离终点区的距离。但是，我似乎无法正确输出代码。

任何建议或帮助将不胜感激。

请检查小提琴。

谢谢！

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";
    };

}

});

JSFIDDLE

4

0 回答 0