更新一个列表而不是复制它

Question

我有一个名称列表，每个名称都分配有分数，每次我单击与该名称相关的按钮时，它都会添加一个分数，然后在按下 [=] 时在 html 文件中对它们进行排名11=] 按钮，一切正常，但是当我进行更改并再次单击排名时，它会添加另一个列表而不是更新现有列表：

let characters = [
   {name: document.getElementById("name 1").textContent, points: 0},
   {name: document.getElementById("name 2").textContent, points: 0},
   {name: document.getElementById("name 3").textContent, points: 0}
];

function choice (button) {
   const buttonCharacterObject = characters.find(obj => obj.name === button.textContent);
   buttonCharacterObject.points += 1;
   const ranking = characters.sort((a, b) => (a.points < b.points ? 1 : -1));
   console.log(ranking);
}

function rank() {
   characters.forEach(function (character) {   
      document.getElementById('rank').innerHTML += '<li>' + character.name + '</li>
})}

<button id="name 1" onclick="choice(this)">Martin</button>
<button id="name 2" onclick="choice(this)">Sam</button>
<button id="name 3" onclick="choice(this)">John</button>
<button onclick="rank()">Rank Characters</button>
<ol id="rank">
    
</ol>

Answer 1

正如问题下面所讨论的，问题是添加了列表项，而现有的项目仍然存在。解决方案是事先清除列表：

function rank() {
   var el = document.getElementById('rank')
   el.innerHTML = ""
   characters.forEach(function (character) {   
      el.innerHTML += '<li>' + character.name + '</li>
})}

更新一个列表而不是复制它

update one list instead of duplicating it

html

javascript

arrays

function

html-lists