Question

我正处于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()

Answer 1

您可以通过在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创建变量时，其作用域被定义为创建位置。这意味着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的另一种方法是创建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

Answer 2

我强烈建议您在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>

Answer 3

在计算总点数之前，请检查所提供的输入是否为有效数字，如果是，则只需使用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>

Javascript-橄榄球积分计算器

3 个答案: