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

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 {&nbsp; &nbsp; border-radius: 2px;&nbsp; &nbsp; width: 10vw;&nbsp; &nbsp; margin-top: 0.5vh;&nbsp; &nbsp; background-color: whitesmoke;}有什么建议吗？

Answer 2

给出以下 HTML<button&nbsp;id='Bx'&nbsp;type="button"&nbsp;onclick='toggleClickedBuz("Bx",&nbsp;"#Bx")'>Bx</button>您将#Bx作为 id 参数传递给切换函数。这会导致 js 调用：document.getElementById("#Bx");但该getElementById函数不需要#前缀。尝试将您的 HTML 更改为<button&nbsp;id='Bx'&nbsp;type="button"&nbsp;onclick='toggleClickedBuz("Bx",&nbsp;"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 {&nbsp; color: #AAAAAA;}