如何点击按钮时更新ul内的li而非新增？代码问题咨询

问题根源在于每次调用poke函数时，没有先清空<ul>容器内的现有<li>元素，导致新元素持续追加。只需在生成新列表前清空容器即可解决。

修改后的代码 #

async function poke(link){
  const response = await fetch(link);
  const poke_data = await response.json();
  
  // 先清空ul内的所有现有元素
  ability_ul.innerHTML = '';

  for(let i = 0; i < 3; i++) {
    const ability_li = document.createElement('li');
    ability_li.innerText = poke_data.moves[i].move.name;
    ability_ul.appendChild(ability_li);
  }
}

button1.addEventListener("click", () => {
  let num = Math.floor(Math.random() * 151);
  const store = data.results[num].url;
  poke(store);
})

关键修改点 #

• 在循环生成新<li>之前，通过ability_ul.innerHTML = '';清空容器内的所有内容，确保每次点击都重新生成列表
• 给未声明的变量（如poke_data、ability_li）加上const或let，避免全局变量污染

内容的提问来源于stack exchange，提问作者anonymous