一个函数，它将一组数字作为参数收集并返回一个百分比数组？

Question

我现在是初学者并且试图理解如何基本上使用函数从每个输入中获取数字的数组，然后找出如何为每个候选者制作单独的百分比。 在JS中，使用它来获得总数，但有没有办法以某种方式从每个输入中获取每个单独的数字？ 也许我的for循环会走错方向：/任何方向或提示都会很棒。

<div>
<label for="votes1">Votes for Candidate 1</label>
<input type="number" name="votesPerPerson" id="cand1" placeholder="Vote count">
</div>
<div>
<label for="votes2">Votes for Candidate 2</label>
<input type="number" name="votesPerPerson" id="cand2" placeholder="Vote count">
</div>
<div>
<label for="votes3">Votes for Candidate 3</label>
<input type="number" name="votesPerPerson" id="cand3" placeholder="Vote count">
</div>


<output id="totalvotes"></output>

这是它的JS

function totalVotes() {
  var votes = document.getElementsByName("votesPerPerson");
  var totalVotes = 0;
  for( var i = 0; i < votes.length; i ++ ) {
  totalVotes += parseInt(votes[i].value);
}
 document.getElementById("totalvotes").innerHTML = totalVotes;
}

Answer 1

function totalVotes() {
  var votes = document.getElementsByName("votesPerPerson");
  var totalVotes = 0;
  var percentages = [];
  for( var i = 0; i < votes.length; i ++ ) {
    totalVotes += parseInt(votes[i].value);
    percentages[i] = parseInt(votes[i].value);
  }
  percentages = percentages.map(function(candidateVotes) {return candidateVotes/totalVotes;});
  document.getElementById("totalvotes").innerHTML = totalVotes;
}

百分比在同一个数组中，然后你可以用它做任何你想做的事！ 希望这有帮助！

Answer 2

看起来你已经很好地掌握了总和。 要创建一个数组，有几种方法可以做到，但我建议从像这样的元素集合中映射它：

 function totalVotes() { var votes = document.getElementsByName("votesPerPerson"); var total = document.getElementById("totalvotes"); // create new array var percentages = []; var totalVotes = 0; // reset innerHTML in case loop returns early due to invalid value total.innerHTML = ""; // reset each vote percentage for (var i = 0; i < votes.length; i++) { votes[i].nextElementSibling.innerHTML = ""; } // overwrite each index with value for (var i = 0; i < votes.length; i++) { totalVotes += percentages[i] = parseInt(votes[i].value); // one of the values is invalid if (isNaN(percentages[i])) return; } total.innerHTML = totalVotes; // calculate percentages here by mapping array of votes for (var i = 0; i < percentages.length; i++) { percentages[i] = 100 * percentages[i] / totalVotes; votes[i].nextElementSibling.innerHTML = percentages[i].toFixed(2) + "%"; } } document.addEventListener('change', totalVotes) 

 <div> <label for="votes1">Votes for Candidate 1</label> <input type="number" name="votesPerPerson" id="cand1" placeholder="Vote count"> <output></output> </div> <div> <label for="votes2">Votes for Candidate 2</label> <input type="number" name="votesPerPerson" id="cand2" placeholder="Vote count"> <output></output> </div> <div> <label for="votes3">Votes for Candidate 3</label> <input type="number" name="votesPerPerson" id="cand3" placeholder="Vote count"> <output></output> </div> <output id="totalvotes"></output> 

Answer 3

你大多有这个主意。 您只需要附加一些事件处理程序（另外一个小的更改）。

 function totalVotes() { var votes = document.getElementsByName("votesPerPerson"); var totalVotes = 0; for(var i = 0; i < votes.length; i++) { totalVotes += parseInt(votes[i].value || 0); // "Minor change" here } document.getElementById("totalvotes").innerHTML = totalVotes; } // Additions below this point var votes = document.getElementsByName("votesPerPerson"); for( var i = 0; i < votes.length; i ++ ) { votes[i].addEventListener('change', totalVotes); } totalVotes(); // Run once to get 0 to show without changing anything 

 <div> <label for="votes1">Votes for Candidate 1</label> <input type="number" name="votesPerPerson" id="cand1" placeholder="Vote count"> </div> <div> <label for="votes2">Votes for Candidate 2</label> <input type="number" name="votesPerPerson" id="cand2" placeholder="Vote count"> </div> <div> <label for="votes3">Votes for Candidate 3</label> <input type="number" name="votesPerPerson" id="cand3" placeholder="Vote count"> </div> <output id="totalvotes"></output> 

现在，该代码可以工作，但请注意一些重复，全局变量等。这里有一个替代方案可以为您提供一些不同的方法来完成相同的事情：

 // If you want to know what this outer function is, look up "IIFE" (function() { 'use strict'; // Get the elements (and make sure they are put in an array) var voteInputEls = Array.from( document.getElementsByName('votesPerPerson') ); // This is used below to handle the change event function setTotalVotes() { // "reduce" the voteInputEls array to a total value var totalVotes = voteInputEls.reduce(function (lastVal, voteInputEl) { return lastVal + parseInt(voteInputEl.value || 0); }, 0); document.getElementById('totalvotes').innerHTML = totalVotes; } // Attach event listeners voteInputEls.forEach(function(voteInputEl) { voteInputEl.addEventListener('change', setTotalVotes); }); setTotalVotes(); // Run once to get 0 })(); 

 <div> <label for="votes1">Votes for Candidate 1</label> <input type="number" name="votesPerPerson" id="cand1" placeholder="Vote count"> </div> <div> <label for="votes2">Votes for Candidate 2</label> <input type="number" name="votesPerPerson" id="cand2" placeholder="Vote count"> </div> <div> <label for="votes3">Votes for Candidate 3</label> <input type="number" name="votesPerPerson" id="cand3" placeholder="Vote count"> </div> <output id="totalvotes"></output>