Hey 兄弟，我帮你排查了代码里的几个小问题，正是这些细节导致功能没生效，咱们来一个个解决：

• 拼写失误：你判断条件里写的 "trasnsparent" 少了个字母'a'，正确的应该是 "transparent"，这种小拼写错误真的很容易踩坑！
• 参数与事件绑定冲突：你定义的 changeBtnColor 函数用了 btnColor 当参数，但这个参数会覆盖你全局声明的按钮变量；而且你同时给按钮加了 addEventListener 和 onclick 两种事件绑定，不仅冗余还可能引发冲突，留一种就够了。另外HTML里的 onclick="changeBtnColor()" 没传参数，函数里的 btnColor 直接变成undefined了。
• 背景色获取的误区：如果按钮的背景色是通过CSS类（比如你写的first_text）设置的，直接用 btnColor.style.backgroundColor 是拿不到值的——因为element.style只能读取内联样式，要获取实际生效的样式得用 window.getComputedStyle()。另外还要注意，transparent 在浏览器里会被解析成 rgba(0, 0, 0, 0)，直接判断字符串要对应上。

给你修正后的完整代码：

JavaScript 部分 #

// 获取按钮元素
const btnColor = document.getElementById("first");

// 绑定点击事件（用这一种就够了）
btnColor.addEventListener('click', changeBtnColor);

function changeBtnColor() {
    // 获取按钮实际生效的样式
    const btnStyle = window.getComputedStyle(btnColor);
    // 判断解析后的透明值
    if (btnStyle.backgroundColor === "rgba(0, 0, 0, 0)") {
        btnColor.style.color = "red";
    }
}

HTML 部分（去掉冗余的onclick） #

<button type="button" class="first_text" id="first">text</button>

如果想让函数更通用（比如多个按钮复用），也可以通过事件对象获取触发按钮：

btnColor.addEventListener('click', function(event) {
    const targetBtn = event.target;
    const btnStyle = window.getComputedStyle(targetBtn);
    if (btnStyle.backgroundColor === "rgba(0, 0, 0, 0)") {
        targetBtn.style.color = "red";
    }
});

备注：内容来源于stack exchange，提问作者Sargis Margaryan