更新一个列表而不是复制它
update one list instead of duplicating it
我有一个名称列表,每个名称都分配有分数,每次我单击与该名称相关的按钮时,它都会添加一个分数,然后在按下 [=] 时在 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>
正如问题下面所讨论的,问题是添加了列表项,而现有的项目仍然存在。解决方案是事先清除列表:
function rank() {
var el = document.getElementById('rank')
el.innerHTML = ""
characters.forEach(function (character) {
el.innerHTML += '<li>' + character.name + '</li>
})}
我有一个名称列表,每个名称都分配有分数,每次我单击与该名称相关的按钮时,它都会添加一个分数,然后在按下 [=] 时在 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>
正如问题下面所讨论的,问题是添加了列表项,而现有的项目仍然存在。解决方案是事先清除列表:
function rank() {
var el = document.getElementById('rank')
el.innerHTML = ""
characters.forEach(function (character) {
el.innerHTML += '<li>' + character.name + '</li>
})}