如何修改代码实现点击按钮仅显示对应形状，隐藏其他形状

当前代码每次点击按钮都会创建新的形状DOM元素，导致多个形状叠加显示。要实现每次点击仅显示当前按钮对应的大形状，可以通过以下两种方案解决：

方案一：清除已有形状后创建新元素 #

无需改动HTML和CSS，仅调整JavaScript逻辑：每次点击按钮前，先移除页面上所有已存在的大形状元素，再创建新的目标形状。

修改后的JavaScript代码：

const buttons = document.getElementsByClassName('button-1');

// 清除页面上所有大形状元素
function clearShapes() {
  const existingShapes = document.querySelectorAll('.big-circle, .big-rectangle, .big-square');
  existingShapes.forEach(shape => shape.remove());
}

buttons[0].addEventListener('click', function(){
  clearShapes();
  const circle = document.createElement('div');
  document.body.appendChild(circle).classList.add('big-circle');
}); 

buttons[1].addEventListener('click', function(){
  clearShapes();
  const rectangle = document.createElement('div');
  document.body.appendChild(rectangle).classList.add('big-rectangle');
});

buttons[2].addEventListener('click', function(){
  clearShapes();
  const square = document.createElement('div');
  document.body.appendChild(square).classList.add('big-square');
});

方案二：复用单个容器（更高效） #

通过添加一个固定容器，动态切换容器的类名来显示不同形状，减少DOM创建/删除操作，性能更优。

1. 修改HTML #

在<body>中添加一个用于承载大形状的容器：

<body>
    <button class="button-1"><div class="circle"></div>Circle</button>
    <button class="button-1"><div class="rectangle"></div>Rectangle</button>
    <button class="button-1"><div class="square"></div>Square</button>
    <div id="shape-container"></div>
    <script src="objectchange.js"></script>
</body>

2. 修改JavaScript #

直接切换容器的类名来显示对应形状：

const buttons = document.getElementsByClassName('button-1');
const shapeContainer = document.getElementById('shape-container');

buttons[0].addEventListener('click', function(){
  shapeContainer.className = 'big-circle';
}); 

buttons[1].addEventListener('click', function(){
  shapeContainer.className = 'big-rectangle';
});

buttons[2].addEventListener('click', function(){
  shapeContainer.className = 'big-square';
});

CSS无需修改，原有的big-*类样式会直接作用在容器上。

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