Multiple inputs to push into separate divs using functions?

Question

I have three inputs that will gather names of candidates and then when you press calculate, it will put the information in the candidate div id at the bottom. I have commented out the JS for each input but isn't there a way to use a function with indices to make the code shorter?

Here is a jsfiddle. It cannot be in jQuery because we haven't learned that yet. https://jsfiddle.net/rtomino/oL3y9y4a/1/

 <fieldset id="candidates">
 <legend>Candidates</legend>

 <div>
<label for="cand1">Candidate 1</label> 
<input class="candidate" id="cand1" placeholder="Candidate"/>
</div>

<div>
<label for="cand2">Candidate 2</label> 
<input class="candidate" id="cand2" placeholder="Candidate"/>
</div>

<div>
<label for="cand3">Candidate 3</label> 
<input class="candidate" id="cand3" placeholder="Candidate"/>
</div>

</fieldset>
<fieldset id="statistics">
<legend>Current Results</legend>
<div>
    Candidate 1
    <div id="candidateName1"></div>
    <label for="cand1pct">Percentage</label>
    <output id="cand1pct"></output>
    </div>
    <div>
     Candidate 2
    <div id="candidateName2"></div>
    <label for="cand2pct">Percentage</label>
    <output id="cand2pct"></output>
    </div>
    <div>
    Candidate 3
    <div id="candidateName3"></div>
    <label for="cand3pct">Percentage</label>
    <output id="cand3pct"></output>
    </div>
    </fieldset>

    <button onclick="calculateVotes()" type="button">Calculate</button>

    // var cand1 = document.getElementById('cand1').value;
    // document.getElementById('candidateName1').innerHTML = cand1;
    //
    // var cand2 = document.getElementById('cand2').value;
    // document.getElementById('candidateName2').innerHTML = cand2;
    //
    // var cand3 = document.getElementById('cand3').value;
    // document.getElementById('candidateName3').innerHTML = cand3;
    //

I feel this an excellent question to learn basics of JS. So I'm not going to do your homework. Though if you can write how you are going to calculate the percentage and total then I might give you some hints. — Etherealm, Jun 29 '17 at 02:15

score 1 · Accepted Answer · answered Jun 29 '17 at 02:49

<fieldset id="candidates">
  <legend>Candidates</legend>

  <div>
    <label for="cand1">Candidate 1</label>
    <input class="candidate" id="cand1" placeholder="Candidate" />
  </div>

  <div>
    <label for="cand2">Candidate 2</label>
    <input class="candidate" id="cand2" placeholder="Candidate" />
  </div>

  <div>
    <label for="cand3">Candidate 3</label>
    <input class="candidate" id="cand3" placeholder="Candidate" />
  </div>

</fieldset>
<fieldset id="statistics">
  <legend>Current Results</legend>
  <div>
    Candidate 1
    <div id="candidateName1"></div>
    <label for="cand1pct">Percentage</label>
    <output id="cand1pct"></output>
  </div>
  <div>
    Candidate 2
    <div id="candidateName2"></div>
    <label for="cand2pct">Percentage</label>
    <output id="cand2pct"></output>
  </div>
  <div>
    Candidate 3
    <div id="candidateName3"></div>
    <label for="cand3pct">Percentage</label>
    <output id="cand3pct"></output>
  </div>
</fieldset>
<button  id="btn" type="button">Calculate</button>

JS

addEventListener is the good method than calling function via onclick.see this

document.getElementById ("btn").addEventListener ("click", calculateVotes, false);
function calculateVotes() {
// For simplifying you can use a for loop
 for(i=1;i<=3;i++)
 {
 name = document.getElementById('cand'+i).value;
 document.getElementById('candidateName'+i).innerHTML =name;
 }

}

Multiple inputs to push into separate divs using functions?

1 Answers1