如何在html css js创建的键盘中切换符号和数字？

<div id="keyboard">
  <button id="symbol">符号</button>
  <button id="number">数字</button>
</div>

#keyboard {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  padding: 10px;
}

button {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px 10px;
  font-size: 16px;
  margin: 5px;
}

// 获取键盘容器和按钮元素
var keyboard = document.getElementById('keyboard');
var symbolBtn = document.getElementById('symbol');
var numberBtn = document.getElementById('number');

// 初始状态为符号
var isSymbol = true;

// 符号按钮点击事件
symbolBtn.addEventListener('click', function() {
  if (!isSymbol) {
    // 切换到符号状态
    // 执行切换到符号的相关操作
    isSymbol = true;
  }
});

// 数字按钮点击事件
numberBtn.addEventListener('click', function() {
  if (isSymbol) {
    // 切换到数字状态
    // 执行切换到数字的相关操作
    isSymbol = false;
  }
});