一個函數，它將一組數字作為參數收集並返回一個百分比數組？

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>