多个javascript按钮（启用/禁用）

我制作了一个包含8个启用/禁用javascript函数按钮的菜单，我使用相同的javascript代码来实现所有8个按钮的功能，但使用不同的css类，这样我就可以让它们工作。我的问题是，当你点击每一个按钮时，我如何让它们工作到哪里

Javascript代码：我在red1-red2-on-green-1-green-2-on-on-on-on-on-on-on-on-on-on-to-the-red-red-red-red-red-red-2-on-on-green-1-green-2-on-on-on-on-on-on-on-on-red

// Left Menu function controls(className) {
if (className == "red") {
    document.getElementById('Skip').setAttribute('class','green');
    // You can define your play music statements here
} else {
    document.getElementById('Skip').setAttribute('class','red');
    // You can define your stop music statements here        
} }

if (className == "red1") { 
document.getElementById('Text').setAttribute('class','green1'); 
// You can define your play music statements here } else { 
document.getElementById('Text').setAttribute('class','red1'); 
// You can define your stop music statements here         } }

Css代码：所有8个按钮的代码相同。red1.red2等。green1.green2等

.red { 
background: red; 
height: 30px;
width: 30px;
border-radius: 50px;
border: 1px solid #000;}                                                                                               

.green { 
background: green;
height: 30px;
width: 30px;
border-radius: 50px;
border: 1px solid #000;}

Html代码：

Skip &nbsp; <button id="Skip" class="red" onclick="controls(this.getAttribute('class'))">Play</button>

Text &nbsp; <button id="Text" class="red1" onclick="controls(this.getAttribute('class'))">Play</button>

跳过播放
文本播放

---

还有6个按钮，代码相同red2 red3，依此类推。

我认为你应该给按钮添加id，id指的是你想播放或停止的音乐。

我的Javascript id文档。getElementById（'Skip'）。和我的按钮ID=“跳过”。它只在一个javascript代码和按钮上工作。当您单击第一个按钮时演示，第二个按钮变为绿色，但它们都需要在您单击“变红变绿”时运行。