数値の配列をパラメータとして収集し、パーセンテージの配列を返す関数ですか？

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> 

割合は、同じ名前の配列であること

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 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 2

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

のためにJSだ、あなたは、あなたがそれでやりたいことができます！ これが役立つことを願っています！

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>