Javascript onclick第一次单击时不触发

注意：在这个主题上有一些类似的问题和答案，但它们似乎都适用于更复杂的问题。这个很简单

第一次单击按钮时，javascript函数没有启动。在第二次单击以及此后的每次单击时，它都会按预期工作。我确信我遗漏了一些简单的东西，但我无法发现问题所在

函数changeStyle（）{
var a=document.getElementsByClassName（'container'）[1]；
如果（a.style.backgroundColor==='blue'）{
a、 style.backgroundColor='红色'；
}否则{
a、 style.backgroundColor='蓝色'；
}
}

.container{
显示：块；
高度：100px；
背景颜色：蓝色；
边框底部：1px纯黑；
光标：指针；
}

---

因为在第一次单击时有style.background=''，所以即使在触发事件时，它仍然保持蓝色。这里有一种解决方法

函数changeStyle（）{
var a=document.getElementsByClassName（'container'）[1]；
如果（a.style.backgroundColor=='blue'| | a.style.backgroundColor===''）{
a、 style.backgroundColor='红色'；
}否则{
a、 style.backgroundColor='蓝色'；
}
}

.container{
显示：块；
高度：100px；
背景颜色：蓝色；
边框底部：1px纯黑；
光标：指针；
}

---

因为在第一次单击时有style.background=''，所以即使在触发事件时，它仍然保持蓝色。这里有一个解决方法

函数changeStyle（）{
var a=document.getElementsByClassName（'container'）[1]；
如果（a.style.backgroundColor=='blue'| | a.style.backgroundColor===''）{
a、 style.backgroundColor='红色'；
}否则{
a、 style.backgroundColor='蓝色'；
}
}

.container{
显示：块；
高度：100px；
背景颜色：蓝色；
边框底部：1px纯黑；
光标：指针；
}

---

a.style

指应用于元素的内联样式。您有几个选项可以解决此问题：

1） 使用类来更改颜色

函数changeStyle（）{
var a=document.getElementsByClassName（'container'）[1]；
a、 classList.toggle（“红色”）；
}

.container{
显示：块；
高度：100px；
背景颜色：蓝色；
边框底部：1px纯黑；
光标：指针；
}
瑞德先生{
背景色：红色；
}

---

a.style

指应用于元素的内联样式。您有几个选项可以解决此问题：

1） 使用类来更改颜色

函数changeStyle（）{
var a=document.getElementsByClassName（'container'）[1]；
a、 classList.toggle（“红色”）；
}

.container{
显示：块；
高度：100px；
背景颜色：蓝色；
边框底部：1px纯黑；
光标：指针；
}
瑞德先生{
背景色：红色；
}

您的元素在第一次单击时没有内联样式。将其更改为

if（！a.style.backgroundColor）{…

然后在

else

do

a.style.backgroundColor=“”

或者更好，使用类而不是应用直接样式。为了进一步解释，一个好的：

样式属性对于完全了解应用于元素的样式是没有用的，因为它只表示在元素的内联样式属性中设置的CSS声明，而不是来自其他样式规则的声明，例如作为部分中的样式规则或外部样式表，基本上，
a.style
中没有可访问的css文件中的信息，因此您的
if
语句首先计算为false。因为正如我提到的，
a.style.backgroundColor
在您第一次运行时根本不存在de>属性未连接到CSS正在应用的样式。我认为。您的元素在第一次单击时没有内联样式。将其更改为
如果（！a.style.backgroundColor）{…
，然后在
else
中执行
a.style.backgroundColor=“”
或者更好，使用类而不是应用直接样式。为了进一步解释，一个好的：
样式属性对于完全了解应用于元素的样式是没有用的，因为它只表示在元素的内联样式属性中设置的CSS声明，而不是来自其他样式规则的声明，例如作为部分中的样式规则或外部样式表，基本上，
a.style
中没有可访问的css文件中的信息，因此您的
if
语句首先计算为false。因为正如我提到的，
a.style.backgroundColor
在您第一次运行时根本不存在de>属性与CSS正在应用的样式没有关联。我认为。使用
|
或命令是明智的。这是一个聪明/简单的解决方法。使用
|
或命令是明智的。这是一个聪明/简单的解决方法。使用
.toggle
是一个聪明而简单的解决方法。我将阅读更多关于那就是。我以前使用toggle遇到的一个问题是，除非“toggled”类写在初始类下面，否则它不一定会更改样式。然后你需要相应地设置样式。使用
。toggle
是一个聪明而简单的解决方案。我将阅读更多关于这方面的内容。我以前使用toggle遇到的一个问题是，除非“toggled”类写在初始类的下面，它不一定改变样式。然后您需要相应地设置样式。