Javascript - калькулятор очков регби - PullRequest
Новая
       43

Javascript - калькулятор очков регби

0 голосов
/ 01 декабря 2018

Я нахожусь на очень ранних стадиях изучения Javascript и возился с основными функциями / переменными.Я написал этот калькулятор очков регби и просто заинтересован, если кто-нибудь подскажет, как его улучшить, особенно в том, как избавиться от подсказок и использовать вместо этого параметры. 

function calculateRugbyPoints (){

   tryTotalPoints = tries * tryPointValue;
   conversionTotalPoints = conversions * conversionsPointValue;
   penaltiesTotalPoints = penalties * penaltyPointValue;
   totalPoints = conversionTotalPoints + penaltiesTotalPoints + tryTotalPoints;
   return totalPoints;
}

var tries = prompt ("How many tries have been scored?");
var tries = parseInt (tries);
var tryPointValue = 5;

var conversions = prompt ("How many conversions have been scored?");
var conversions = parseInt (conversions);
var conversionsPointValue = 2;

var penalties = prompt ("How many penalties have been scored?");
var penalties = parseInt (penalties);
var penaltyPointValue = 3;

calculateRugbyPoints()

Ответы [ 3 ]

0 голосов
/ 01 декабря 2018

Я настоятельно рекомендую вам отображать на HTML-странице или использовать простую форму для получения этой информации, в противном случае вам придется использовать подсказку для простого javascript, используя html, который наверняка увеличит вашу кривую обучения и будет полезен для правильного использованиякалькулятор, и конечно же, будет более удобным для пользователя.

Я всегда использую онлайн-инструмент как https://codepen.io/pen/ или https://jsbin.com/, чтобы проверить мои фрагменты на js. 

function calculateRugbyPoints (){
var tryPointValue = 5;
var conversionsPointValue = 2;
var penaltyPointValue = 3;
var tries = parseInt(document.getElementById("tries").value);
var conversions = parseInt(document.getElementById("conversions").value);
var penalties = parseInt(document.getElementById("penalties").value);
    

   tryTotalPoints = tries * tryPointValue;
   conversionTotalPoints = conversions * conversionsPointValue;
   penaltiesTotalPoints = penalties * penaltyPointValue;
   totalPoints = conversionTotalPoints + penaltiesTotalPoints + tryTotalPoints;
   console.log(totalPoints);
  alert(totalPoints);

  return totalPoints;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <br>
  <div>
<form onsubmit="calculateRugbyPoints()">
  Enter Tries: <input id="tries" type="text"><br>
  Enter Conversions: <input id="conversions" type="text"><br>
  Enter Penalties: <input id="penalties" type="text"><br>

  <input type="submit">
</form>
</div>  
  

</body>
</html>
0 голосов
/ 01 декабря 2018

Перед тем, как вычислять итоговые значения, проверьте, является ли предоставленный ввод действительным числом или нет, если это так, просто используйте parseInt и передайте их в функцию CalculateRugbypoints. 

var calBtn = document.getElementById('calculateBtn');
    calBtn.addEventListener('click', calculatePoints, false);
    
    function calculatePoints() {
    	let tries = document.getElementById('tries'),
        	conversions = document.getElementById('conversions'),
          penalties = document.getElementById('penalties');
            
        tries = tries.value;
        conversions = conversions.value;
        penalties = penalties.value;
        
        if(!validNumber(tries) || !validNumber(conversions) || !validNumber(penalties)) return;
        console.log(calculateRugbyPoints(parseInt(tries,10), parseInt(conversions, 10), parseInt(penalties, 10)));
    }
    
    function calculateRugbyPoints (tries, conversions, penalties){
       let tryPointValue = 5;
       let conversionsPointValue = 2;
       let penaltyPointValue = 3;
       // Initializing more vriables to their computed values
       let tryTotalPoints = tries * tryPointValue;
       let conversionTotalPoints = conversions * conversionsPointValue;
       let penaltiesTotalPoints = penalties * penaltyPointValue;

       let totalPoints = conversionTotalPoints + penaltiesTotalPoints + tryTotalPoints;
       return totalPoints;
    }
    
    function validNumber(num) {
      return num && !isNaN(num) && Number(num) === parseInt(num, 10)
    }
<div>
    Enter Tries: <input id="tries" type="text">
</div>
<div>
    Enter Conversions: <input id="conversions" type="text">
</div>
<div>
    Enter Penalties: <input id="penalties" type="text">
</div>
<div>
    <button id="calculateBtn">
        calculate
    </button>
</div>
0 голосов
/ 01 декабря 2018

Вы можете улучшить это, используя аргументы в вашем методе calculateRugbyPoints().На данный момент все ваши переменные являются глобальными.Реально вы должны использовать глобальные переменные, когда они совместно используются несколькими функциями.Однако в вашем случае у вас есть только одна функция, поэтому следует использовать аргументы / параметры.Кроме того, вы должны определить переменные, которые являются специфическими для функции (например, tryPointsValue и т. Д.) Внутри самой функции, а не вне ее. 

function calculateRugbyPoints (tries, conversions, penalties){
   // Initializing (setting equal to) the variable names to their values (integers/numbers)
   let tryPointValue = 5;
   let conversionsPointValue = 2;
   let penaltyPointValue = 3;

   // Initializing more vriables to their computed values
   let tryTotalPoints = tries * tryPointValue;
   let conversionTotalPoints = conversions * conversionsPointValue;
   let penaltiesTotalPoints = penalties * penaltyPointValue;

   let totalPoints = conversionTotalPoints + penaltiesTotalPoints + tryTotalPoints;
   return totalPoints;
}

Как вы могли заметить, вФункция выше я использовал let.let очень похож на var, однако, когда мы создаем переменную с использованием let, ее scope определяется в том месте, где она была создана.Это означает, что ни одна из переменных, определенных в функции calculateRugbyPoints, не может быть доступна вне функции.

Теперь, когда вы создали свою функцию для приема параметров, вы должны пройти через параметрыпри вызове вашей функции: 

calculateRugbyPoints(tries, conversions, penalties);

Теперь посмотрим, как вы получаете пользовательский ввод.В данный момент вы переинициализируете свои переменные следующим образом: 

var tries = prompt ("How many tries have been scored?");
var tries = parseInt(tries); // <--- var shouldn't be here

Это не очень хорошая идея, поскольку вы переопределяете переменную, используя var каждый раз.Вы должны использовать var только тогда, когда определяете переменную в первый раз.Таким образом, приведенный выше код должен выглядеть следующим образом: 

var tries = prompt ("How many tries have been scored?");
tries = parseInt(tries);

Это можно даже еще больше упростить до: 

var tries = parseInt(prompt ("How many tries have been scored?"));

или даже: 

var tries = +prompt ("How many tries have been scored?");

Здесь + означает преобразование всего, что мы вводим через приглашение в число (целое число, число с плавающей запятой и т. Д.).Но учтите, что parseInt и оператор + ведут себя немного по-разному.Но для того, чего вы пытаетесь достичь, вам не нужно слишком беспокоиться об этом.

Существует также много способов получения пользовательского ввода.Еще один способ использования prompt s - создание формы HTML и использование javascript для получения чисел, пропущенных в этой форме.

Учитывая все это, ваша окончательная программа должна выглядеть примерно так: 

function calculateRugbyPoints(tries, conversions, penalties) {
  // Initializing (setting equal to) the variable names to their values (integers/numbers)
  let tryPointValue = 5;
  let conversionsPointValue = 2;
  let penaltyPointValue = 3;

  // Initializing more vriables to their computed values
  let tryTotalPoints = tries * tryPointValue;
  let conversionTotalPoints = conversions * conversionsPointValue;
  let penaltiesTotalPoints = penalties * penaltyPointValue;

  let totalPoints = conversionTotalPoints + penaltiesTotalPoints + tryTotalPoints;
  return totalPoints;
}

var tries = parseInt(prompt("How many tries have been scored?"));
var conversions = parseInt(prompt("How many conversions have been scored?"));
var penalties = parseInt(prompt("How many penalties have been scored?"));

alert("Your points are: " +calculateRugbyPoints(tries, conversions, penalties)); // alert the returned value of the function calculateRugbuPoints
...