CODEWITHSUNDEEP
javascriptfunctioninput
logan26
logan26

Reputation: 283

Multiple inputs to push into separate divs using functions?

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

Upvotes: 0

Views: 81

Answers (1)

deffrin joseph
deffrin joseph

Reputation: 151

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

}

Upvotes: 1

Related Questions