Javascript 一种将getElementByID与对象文字一起多次使用的有效方法？

我是javascript的初学者，刚刚开始使用DOM。在几个不同的位置获取了一组具有不同ID名称的跨度，并从对象文本中获取了数据之后，它似乎开始变得多余。难道没有更好的写作方法吗？我也在学习函数，但不确定如何将它们联系起来。这里是JSfiddle，以便于查看

HTML:

<fieldset id="candidates">
   <legend>Candidates</legend>
   <div>
   <label for="cand1">Candidate 1</label>
   <span class="candidate" id="cand1"></span>
   <span class="party" id="party1"></span>
</div>

<div>
  <label for="cand2">Candidate 2</label>
  <span class="candidate" id="cand2"></span>
  <span class="party" id="party2"></span>
 </div>

 <div>
  <label for="cand3">Candidate 3</label>
  <span class="candidate" id="cand3"></span>
  <span class="party" id="party3"></span>
 </div>
 </fieldset>

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

---

由于您正在对

候选人进行循环操作

votingData中的数组
对象，您可以使用循环来迭代数组并减少复制量


var votingData={
候选人：[{
姓名：“哈里·S·杜鲁门”，
政党：“民主”
}, {
姓名：“托马斯·E·杜威”，
政党：“共和党”
}, {
姓名：“斯特罗姆·瑟蒙德”，
党：“Dixiecrat”
}]
};
var候选者=votingData.候选者；
对于（变量i=0；i


候选人
候选人1
候选人2
候选人3
候选人1的成绩
百分比
候选人2的成绩
百分比
候选人3的成绩
百分比
最好不要将id名称与添加的数字（如candidateName1、candidateName2和candidateName3）一起使用，而是将其替换为可以重用的类，如candidateName1（简化示例）：

然后通过for循环进行迭代（这里也可以应用其他元素）：

for（var i=0，n=votingData.candidates.length；i
为了确保我完全理解这一点，您创建了一个新变量，然后用点符号访问对象的候选属性。然后使用一个for循环，从候选长度开始，那么应该是3？还是1？然后创建一个新的变量，该变量接受每个候选数组？然后哪个选项将每个候选项带到每个正确的位置？@BeckyT长度将为3，因为
votingData。候选项与包含3项的数组相关。你的其他陈述都是正确的，太好了！非常感谢你。“快到了！”贝基很高兴能帮上忙。
var votingData = {
  candidates: [{
  name: "Harry S. Truman",
  party: "Democratic"
},
{
  name: "Thomas E. Dewey",
  party: "Republican"
},
{
  name: "Strom Thurmond",
  party: "Dixiecrat"
}]
};


 document.getElementById("cand1").innerHTML = 
 votingData.candidates[0].name;
 document.getElementById("candidateName1").innerHTML = 
 votingData.candidates[0].name;
 document.getElementById("party1").innerHTML = 
 votingData.candidates[0].party;

 document.getElementById("cand2").innerHTML = 
 votingData.candidates[1].name;
 document.getElementById("candidateName2").innerHTML = 
 votingData.candidates[1].name;
 document.getElementById("party2").innerHTML = 
 votingData.candidates[1].party;

 document.getElementById("cand3").innerHTML = 
 votingData.candidates[2].name;
 document.getElementById("candidateName3").innerHTML = 
 votingData.candidates[2].name;
 document.getElementById("party3").innerHTML = 
 votingData.candidates[2].party;

<fieldset id="statistics">
  <div>
  <h2>Results for Candidate 1</h2>
   <div class="candidate"></div>
  </div>
  <div>
  <div class="candidate"></div>
  </div>
  <div>
  <div class="candidate"></div>
  </div>
  </fieldset>

var candidates = document.getElementsByClassName('candidate');

for (var i = 0, n = votingData.candidates.length; i < n; i++) {
    candidates.innerHTML = votingData.candidates[i];
}