JavaScript单击按钮改变盒子形状，按钮上的文字与盒子形状保持一致

在JavaScript中，你可以通过给按钮添加点击事件监听器，并结合CSS样式来实现这个功能。首先，你需要创建一个按钮和一个动态更改样式的盒子。当按钮被点击时，可以修改盒子的样式，同时更新按钮上的文字以反映新形状。

1. HTML部分：

<button id="shapeButton">圆形</button>
<div id="box" class="square"></div>

2. CSS部分：

.square {
  width: 100px;
  height: 100px;
  border-radius: 0; /* 默认为方形 */
}

.rounded {
  border-radius: 50%; /* 圆形 */
}

3. JavaScript部分：

document.getElementById('shapeButton').addEventListener('click', function() {
  const box = document.getElementById('box');
  if (box.classList.contains('square')) {
    box.classList.remove('square');
    box.classList.add('rounded'); // 将方框转换为圆形
    this.textContent = '圆形'; // 更新按钮文本
  } else {
    box.classList.remove('rounded');
    box.classList.add('square');
    this.textContent = '方形'; // 返回到原始状态
  }
});

在这个示例中，当你点击"圆形"按钮时，盒子会变为圆形，按钮的文字显示"圆形"；反之，点击按钮则盒子变回方形，按钮文字变成"方形"。