HTML/CSS/JS实现容器内容清空替换及帕斯卡三角状态重置方案

问题1：容器内容追加而非替换修复 #

• 触发原因：
  1. 全局变量createdHexs作为执行锁，首次调用后设为true，后续点击创建按钮不会进入生成逻辑
  2. 生成新三角前未清空容器内原有内容，包括HTML中预设的默认5行三角、之前动态生成的内容
• 修复方法：
  移除createdHexs执行锁，在生成新内容前直接清空.container容器的现有内容，代码示例：

function createHexs(){
  const container = document.querySelector('.container');
  // 新增：清空容器内所有原有内容
  container.innerHTML = '';
  const hexagonPattern = [1];
  var numRange = Array();
  var index = Number(document.getElementById("Text1").value);
  let rowCount = index;
  if (index == 0 || index > 11){
    if (index > 11){
      alert("输入数字超出范围，三角将被重置为默认大小！");
    }
    rowCount = 5;
  }
  for (let i=2; i<=rowCount; i++){
    hexagonPattern.push(i);
  }
  numRange = generatePascal(rowCount);
  document.getElementById("createhexagons").innerHTML = `已生成${rowCount}行的帕斯卡三角`;
  for (let i = 0; i < hexagonPattern.length; i++) {
    const row = document.createElement('div');
    row.classList.add('row');
    for (let j = 0; j < hexagonPattern[i]; j++) {
      const hexagon = document.createElement('div');
      hexagon.classList.add('hexagon');
      const num = document.createElement('div');
      num.classList.add('text');
      num.innerHTML = numRange[i][j];
      hexagon.appendChild(num);
      row.appendChild(hexagon);
    }
    container.appendChild(row);
  }
}

问题2：点击属性按钮恢复默认状态实现 #

可以通过JS操作类实现需求，方案如下：

1. 新增全局重置函数，遍历所有六边形元素，移除所有额外添加的属性类，回到无动画无高亮的初始状态
2. 每个属性按钮点击时先调用重置函数，再给对应元素添加属性类，如果需要临时动画效果，可通过setTimeout指定时长后移除属性类
   代码示例：

// 新增重置函数
function resetTriangle() {
  const allHex = document.querySelectorAll('.hexagon');
  allHex.forEach(hex => {
    // 移除所有property开头的自定义类
    hex.classList.forEach(cls => {
      if (cls.startsWith('property')) {
        hex.classList.remove(cls);
      }
    })
  })
}

function property1(){
  // 先重置回默认状态
  resetTriangle();
  const targetHex = document.querySelector(".container").getElementsByClassName("row")[4].getElementsByClassName('hexagon')[2];
  targetHex.classList.add("property1");
  // 如果需要临时高亮，加下面这行，1.5秒后自动恢复
  // setTimeout(() => targetHex.classList.remove("property1"), 1500);
}

补充说明 #

• HTML、CSS代码无需修改，仅替换JS部分的对应函数即可实现需求
• 清空容器直接使用innerHTML = ''兼容性更好，无需处理remove/removeChild的节点引用问题

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