更改按钮的背景颜色（开/关）

Question

我已经审查过这个问题，但我没有使用角度。到目前为止，这是我的代码：<button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "#Bx")'>Bx</button><button id='By' type="button" onclick='toggleClickedBuz("Bx", "#Bx")'>By</button><button id='Bz' type="button" onclick='toggleClickedBuz("Bx", "#Bx")'>Bz</button>我的 JS 是这样的：function toggleClickedBuz( bizStr , id ) {    if(clickedBusinesses.includes(bizStr)){       // removing duplicate element from that array, dependant on button pressed       clickedBusinesses = clickedBusinesses.filter( cb => cb !== bizStr );       document.getElementById( id ).style.backgroundColor='white';    }else{        // else push it to the array       clickedBusinesses.push(bizStr)       document.getElementById( id ).style.backgroundColor='red';    }    console.log(clickedBusinesses)}

Answer 1

但我收到此错误：

未捕获的类型错误：无法读取 null 的属性“样式”

尽管我的CSS中有这个：

.canvas .button-box button {

    border-radius: 2px;

    width: 10vw;

    margin-top: 0.5vh;

    background-color: whitesmoke;

}

有什么建议吗？

Answer 2

给出以下 HTML

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "#Bx")'>Bx</button>

您将#Bx作为 id 参数传递给切换函数。这会导致 js 调用：

document.getElementById("#Bx");

但该getElementById函数不需要#前缀。尝试将您的 HTML 更改为

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>Bx</button>

修复您当前的问题👍

Answer 3

很简单，你不需要#in toggleClickedBuz("Bx", "#Bx"). 放id无#. 该函数getElementById()已经引用了 id。所以你不需要指定使用#.

你的 HTML 应该是这样的

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>Bx</button>

<button id='By' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>By</button>

<button id='Bz' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>Bz</button>

Answer 4

您不需要#在按钮中。这么多就足够了：

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx","Bx")'>Bx</button>

<button id='By' type="button" onclick='toggleClickedBuz("Bx","Bx")'>By</button>

<button id='Bz' type="button" onclick='toggleClickedBuz("Bx","Bx")'>Bz</button>

#是一个 CSS 选择器，用于选择 HTMLid元素。您可以通过以下方式在 CSS 中引用它们：

#Bx {

  color: #AAAAAA;

}