时间戳

首页 > 解决方案 > 更新一个列表而不是复制它

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

问题描述

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

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>

标签： javascripthtmlarraysfunctionhtml-lists

解决方案

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

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

推荐阅读