求助：如何实现按钮onclick二次点击恢复默认背景色

问题分析 #

• 原JS函数参数设计错误：每个按钮点击仅传入自身元素，但函数试图操作四个参数，未传入的参数为undefined，执行时会抛出错误导致功能失效。
• 缺少状态切换逻辑：仅实现了设置红色背景，未判断当前状态来恢复默认样式。

解决方案 #

推荐用CSS类切换的方式实现，这种方式更易维护，也避免直接操作内联样式的问题：

1. 调整HTML代码 #

把每个按钮的onclick参数改为传入this，让函数获取当前点击的按钮元素：

<div class="price">
    <label for="price">My donation: </label>
    <button class="fifty_button" onclick="toggleColor(this)">$50</button>
    <button class="hundred_button" onclick="toggleColor(this)">$100</button>
    <button class="twohundred_button" onclick="toggleColor(this)">$250</button>
    <button class="fivehundred_button" onclick="toggleColor(this)">$500</button>
</div>

2. 添加CSS样式 #

定义按钮的默认样式和激活状态样式：

/* 默认样式 */
.price button {
    background-color: #ffffff; /* 替换成你的实际默认背景色 */
    border: 1px solid #cccccc;
    padding: 8px 16px;
    cursor: pointer;
}

/* 激活状态样式 */
.price button.active {
    background-color: red;
}

3. 编写JS切换函数 #

通过classList.toggle()方法实现类的添加/移除，从而切换背景色：

function toggleColor(btn) {
    btn.classList.toggle('active');
}

替代方案：直接操作内联样式 #

如果不想用CSS类，也可以直接判断内联样式来切换，清空内联样式即可恢复CSS中定义的默认样式：

function toggleColor(btn) {
    // 判断当前按钮是否已设置红色背景
    if (btn.style.backgroundColor === 'red') {
        // 清空内联样式，恢复默认
        btn.style.backgroundColor = '';
    } else {
        // 设置红色背景
        btn.style.backgroundColor = 'red';
    }
}

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