如何通过多次点击按钮实现元素ID的多次切换？

你当前的代码存在核心问题：每次修改元素ID后，后续通过document.getElementById("原ID")无法找到该元素——因为ID已经变更。比如第一次点击后元素ID从shape改为shape1，下次点击时document.getElementById("shape")会返回null，访问null.id直接抛出错误，导致后续else if分支完全无法执行。

基础修复版本 #

先提前获取目标元素的引用，后续复用该引用判断当前ID，避免重复查找失效的ID：

var shapeBtn = document.getElementById("cng_shape");
// 一次性获取目标元素，后续直接使用这个引用
var shapeElement = document.getElementById("shape");

shapeBtn.onclick = () => {
    if (shapeElement.id === "shape") {
        shapeElement.id = "shape1";
    } else if (shapeElement.id === "shape1") {
        shapeElement.id = "shape3";
    } else if (shapeElement.id === "shape3") {
        shapeElement.id = "shape";
    }
};

可扩展优化版本 #

如果后续需要新增更多图形样式，用数组维护ID切换顺序，通过索引循环实现更简洁的逻辑：

var shapeBtn = document.getElementById("cng_shape");
var shapeElement = document.getElementById("shape");
// 定义ID的循环切换顺序，新增样式直接向数组添加ID即可
const shapeIds = ["shape", "shape1", "shape3"];

shapeBtn.onclick = () => {
    const currentIndex = shapeIds.indexOf(shapeElement.id);
    // 取模运算实现循环切换到下一个ID
    const nextIndex = (currentIndex + 1) % shapeIds.length;
    shapeElement.id = shapeIds[nextIndex];
};

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