Javascript 按钮变成颜色

我想把CSS设计放在我的代码中，绿色在父按钮上，黄色在子按钮上

函数myFunction（btn）{
var counter=parseInt（btn.getAttribute（'data-counter'）；
var button=document.createElement（'button'）；
button.innerHTML=btn.id+'.'+计数器；
button.id=btn.id+'.'+计数器；
setAttribute（'data-counter'，'1'）；
setAttribute（'onclick'，'myFunction（this'）；
document.body.appendChild（按钮）；
btn.setAttribute（'data-counter'，++counter）；
}

---

主按钮

此代码执行以下操作：

• 将所有按钮的颜色重置为默认值
• 将当前单击的按钮颜色更改为绿色
• 将孩子的按钮颜色更改为黄色

根据您的要求修改代码

函数myFunction（btn）{
var x=document.getElementsByTagName（“按钮”）；
var i；
对于（i=0；i

---

Main按钮

对于元素的任何样式，都应该使用类。内联样式会使代码重复且难以维护

代码

函数myFunction（btn）{
var counter=parseInt（btn.getAttribute（'data-counter'）；
var button=document.createElement（'button'）；
button.innerHTML=btn.id+'.'+计数器；
button.id=btn.id+'.'+计数器；
setAttribute（'data-counter'，'1'）；
setAttribute（'onclick'，'myFunction（this'）；
button.className=“child”；
document.body.appendChild（按钮）；
btn.setAttribute（'data-counter'，++counter）；
btn.className=“父级”
}

.parent{
背景：绿色；
}
.孩子{
背景：黄色；
}

---

Main按钮

Main按钮如果我假设正确，

Main按钮

是父按钮，新添加的按钮是子按钮。是吗？是的，先生。但是每次我点击子按钮，所有颜色都会重置，新的父级和子级显示正确的颜色，先生，但是每次我点击另一个按钮，所有颜色都会重置。如果你点击一个按钮，他的代码会工作（不管是哪一个）它会重置所有颜色，并为单击的按钮设置绿色，为新按钮设置黄色。当我单击“当前”按钮时，按钮的父按钮将亮起绿色