Javascript 按钮显示进度

我正在为有新生儿的父母做一个项目，在那里他们可以在照顾孩子的过程中学习进步。这将通过按钮显示，当一个阶段完成时，它将更改该按钮上的颜色

到目前为止，我的代码如下所示： 将按钮颜色更改为绿色

var计数=1；
功能设置颜色（btn，颜色）{
var属性=document.getElementById（btn）；
如果（计数=0）{
property.style.backgroundColor=“#FFFFFF”
计数=1；
}
否则{
property.style.backgroundColor=“#7FFF00”
计数=0；
}
}

换尿布

您为每个按钮提供了相同的

id

——应该有一个id标识，在本例中，它不是。这里的代码采用id为

按钮的第一个元素，这就是为什么第一个按钮每次都会更改的原因

为每个按钮使用不同的ID，或者通过事件变量访问单击的元素本身

您也只有一个count变量，不能使用多个按钮。假设您按下第一个按钮=>
count
现在是
1
。然后按下第二个按钮，它不会变成绿色，因为
count
已经是
1

您可能应该将该信息存储在元素本身上，可能使用
data count
-属性

以下是一个工作示例：


函数setColor（元素）{
如果（！element.hasAttribute（'data-count'））{
元素setAttribute（'data-count'，1）；
}
var count=element.getAttribute（'data-count'）；
如果（计数=0）{
element.style.backgroundColor='#ffffff'；
元素setAttribute（'data-count'，1）；
}否则{
element.style.backgroundColor='#7fff00'；
元素。setAttribute（'data-count'，0）；
}
}

换尿布
所以让我们删除那些重复的ID，然后我们可以直接将元素传递到函数中，这样我们就不需要通过它的ID来获取它

然后，我们不再使用
count
变量，而是将实际元素上的值存储在
data
属性中，以便将其状态存储在元素本身上


函数setColor（元素）{
if（element.getAttribute（'data-done'）=“0”）{
element.style.backgroundColor=“#7FFF00”
element.setAttribute（'data-done'，“1”）；
}否则{
element.style.backgroundColor=“#FFFFFF”
element.setAttribute（'data-done'，“0”）；
}
}

换尿布
您所有的按钮都有相同的ID，一个ID对于整个网站来说应该是唯一的。也许是你问题的根源。。。