为什么我的按钮需要点击两下才能切换一个功能？JavaScript

我创建了一个带有按钮的网页。单击时，它将从默认的黑色变为粉红色，再次单击时，它将变为紫色。出于某种原因，需要单击两下才能从默认的黑色按钮变为粉红色。请帮助我找出如何使其在第一次单击时更改（或者如果您知道更好的执行方法）

HTML

CSS

---

在javascript中，您编写了以下代码行

let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);

同样在html中，您编写了如下代码

<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>

---

您添加了两次eventListener，一次是在HTML onclick中，另一次是在带有addEventListener的Javascript中

您可以将Javascript代码简化为如下所示：

var click=false；
let buttonClick=document.getElementById（'buttonStyle'）；
函数changeStyle（）{
点击=！点击；
//单击按钮时，在粉红色和紫色之间来回切换背景色
buttonClick.style.background=单击？#ff0066:“#9933ff”；
//在“我现在是粉红色”和“我现在是紫色”之间来回切换文本
buttonClick.innerHTML=单击“我现在是粉红色！”：“我现在是紫色！”；
}

正文{
文本对齐：居中；
字体系列：Helvetica；
}
钮扣{
宽度：350px；
高度：125px；
背景色：黑色；
颜色：白色；
边框：5px纯黑；
字体大小：20px；
}

活动实验室
单击按钮将更改其颜色
我的颜色会变！

body{
text-align: center;
font-family: Helvetica;
}


button {
width:350px;
height: 125px;
background-color: black;
color:white;
border: 5px solid black;
font-size: 20px;
}

let buttonClick = document.getElementById('buttonStyle');
buttonClick.addEventListener('click', changeStyle);

<button onclick="changeStyle()" type="button" name="button" id="buttonStyle">My color will change!</button>

<button type="button" name="button" id="buttonStyle">My color will change!</button>