JS初学者：如何实现向allPie容器循环添加元素至4个？

原始代码与需求 #

用户提供的原始代码片段：

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");

eventList();
function eventList(e) {
  arrow.addEventListener("click", showSkills);
}

// function showSkills() {
//   const pie = document.createElement("div");
//   pie.classList.add("pie1");

//   callAllPie.appendChild(pie);

//   const rightDiv = document.createElement("div");
//   rightDiv.classList.add("slice-right1");

//   const leftDiv = document.createElement("div");
//   leftDiv.classList.add("slice-left1");

//   const percentDiv = document.createElement("div");
//   percentDiv.classList.add("percent1");

//   const numberDiv = document.createElement("div");
//   numberDiv.classList.add("number1");
//   numberDiv.innerHTML = "%99";

//   const nameDiv = document.createElement("div");
//   nameDiv.classList.add("name1");
//   nameDiv.innerHTML = "HTML";

//   pie.appendChild(rightDiv);
//   pie.appendChild(leftDiv);
//   pie.appendChild(percentDiv);
//   percentDiv.appendChild(numberDiv);
//   percentDiv.appendChild(nameDiv);
//   callAllPie.appendChild(pie);
// }
function showSkills() {
  for (let element = callAllPie; element < 5; element++) {
    console.log(element);
  }
}

需求：作为JavaScript初学者，想要实现如下逻辑：点击按钮时，若.allPie容器中元素数量不足4个，就添加预先创建好的pie元素，直到容器内元素数量达到4个时停止添加。

修改后的代码实现 #

首先恢复被注释的pie元素创建逻辑，同时优化代码结构，实现需求逻辑：

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");

eventList();
function eventList() {
  arrow.addEventListener("click", showSkills);
}

// 封装创建单个pie元素的函数，方便复用和扩展
function createPieElement(percentText, skillName) {
  const pie = document.createElement("div");
  pie.classList.add("pie1");

  const rightDiv = document.createElement("div");
  rightDiv.classList.add("slice-right1");

  const leftDiv = document.createElement("div");
  leftDiv.classList.add("slice-left1");

  const percentDiv = document.createElement("div");
  percentDiv.classList.add("percent1");

  const numberDiv = document.createElement("div");
  numberDiv.classList.add("number1");
  numberDiv.innerHTML = percentText;

  const nameDiv = document.createElement("div");
  nameDiv.classList.add("name1");
  nameDiv.innerHTML = skillName;

  pie.appendChild(rightDiv);
  pie.appendChild(leftDiv);
  pie.appendChild(percentDiv);
  percentDiv.appendChild(numberDiv);
  percentDiv.appendChild(nameDiv);

  return pie;
}

// 方案1：点击一次直接补满4个元素
function showSkills() {
  const currentCount = callAllPie.children.length;
  // 计算还需要添加的元素数量，最多补到4个
  const needAddCount = 4 - currentCount;

  if (needAddCount > 0) {
    // 预设4个技能的信息，可根据需求修改
    const skillList = [
      { percent: "%99", name: "HTML" },
      { percent: "%95", name: "CSS" },
      { percent: "%90", name: "JavaScript" },
      { percent: "%85", name: "React" }
    ];
    // 循环创建并添加元素
    for (let i = 0; i < needAddCount; i++) {
      const skill = skillList[currentCount + i];
      const pie = createPieElement(skill.percent, skill.name);
      callAllPie.appendChild(pie);
    }
  }
}

// 方案2：点击一次添加一个元素，直到满4个
// function showSkills() {
//   const currentCount = callAllPie.children.length;
//   if (currentCount < 4) {
//     const skillList = [
//       { percent: "%99", name: "HTML" },
//       { percent: "%95", name: "CSS" },
//       { percent: "%90", name: "JavaScript" },
//       { percent: "%85", name: "React" }
//     ];
//     const skill = skillList[currentCount];
//     const pie = createPieElement(skill.percent, skill.name);
//     callAllPie.appendChild(pie);
//   }
// }

关键修改说明 #

1. 封装元素创建逻辑：把重复的pie元素创建代码抽成独立函数，既避免代码冗余，还能灵活传入不同的技能名称和百分比。
2. 判断元素数量：通过callAllPie.children.length获取容器当前的子元素数量，以此为依据控制是否继续添加。
3. 循环控制添加：根据需求选择两种方案——一次补满4个，或每次点击添加一个，直到元素总数达到4个后，后续点击不再触发添加。

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